角不清除文本輸入

Question

我想根據來自控制器的點擊隱藏一個div：

我的HTML：

<div ng-controller ="myctrl"> 
    <div ng-repeat="emp in emps"> 
     <div class="myclass"> 
     <p> {{emp.name}} </p> 
      <span class="testclass" ng-click="showBox='true'" >Show</span><br> 

      <div ng-show="showBox"> 
      <textarea rows="3" cols="50" ng-model="data.sometext"></textarea><br> 
      <button ng-click = "testme(sometext)">Submit</button> 
      </div> 

     </div> 
    </div> 
</div> 

在控制器：

app.controller("myctrl", function($scope){ 

    $scope.data = {sometext : ""} //DONT KNOW WHY I HAD TO DO LIKE THIS 

    $scope.testme = function(sometext){ 
     console.log(sometext); 
     $scope.data.sometext = ""; //THIS WORKS. 
     $scope.showBox = false;  //THIS DOES NOT WORK. 
     $scope.showBox = 'false'; //THIS DOES NOT WORK. 
     HOW TO HIDE THE DIV 
}  
}); 

所以當我點擊Show，顯示textarea。當我點擊按鈕時，文本區域變爲空白。就像我想要的。但是div並不隱藏。我想在單擊按鈕時隱藏div。試圖使ng-showfalse但它無法正常工作。

謝謝。

Answer 1

首先，您不應該在span元素上使用ngModel指令。

從ngModel文檔：

的ngModel指令結合使用NgModelController，這是 創建並由這個指令露出的輸入，選擇，文本區域（或定製的形式 控制）上的範圍的特性。

我改變了你的代碼，使它更清晰一點。代碼現在使用控制器作爲語法，使數據更加清晰，並且跨度已更改爲按鈕。請參閱控制器的AngularJS example作爲語法和這樣做的好處。

下面演示：

1）當您單擊顯示按鈕時，EMP的showText屬性設置爲true。

2）由於示波器已更新，所以調用$digest週期，並對div標籤上的ngShow指令中的表達式進行評估。那些emp設置爲true的showText屬性將評估爲true，然後顯示包含textarea的div元素。

3）當你點擊你的controller「提交」按鈕，您的testme函數被調用，在綁定的值傳遞從MyCtrl.data.sometext舉行，EMP，所以我們可以改變它的性質textareangModel指令。將emp的text屬性設置爲輸入，並將showText屬性設置爲false，以便textarea再次隱藏。

// app.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app', []); 
 

 
})(); 
 

 
// my.controller.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app').controller("MyController", MyController); 
 

 
    MyController.$inject = ['$scope']; 
 

 
    function MyController($scope) { 
 

 
    var vm = this; 
 

 
    vm.emps = [{ 
 
     id: 1, 
 
     name: "John Doe" 
 
     }, 
 
     { 
 
     id: 2, 
 
     name: "Jane Smith" 
 
     }, 
 
     { 
 
     id: 3, 
 
     name: "Jack Jones" 
 
     } 
 
    ]; 
 

 
    // expose the testme function to the view 
 
    vm.testme = testme; 
 

 
    function testme(input, emp) { 
 
     
 
     // get the index of the employee 
 
     var index = vm.emps.indexOf(emp); 
 
     
 
     // set the employee text to the input 
 
     vm.emps[index].text = input; 
 
     
 
     // set showText to false 
 
     vm.emps[index].showText = false; 
 

 
    } 
 

 
    } 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="MyController as MyCtrl"> 
 

 
    <div ng-repeat="emp in MyCtrl.emps"> 
 

 
    <div class="myclass"> 
 

 
     <p>{{emp.name}} </p> 
 
     <p>{{emp.text}}</p> 
 
     <p> 
 
     <button ng-click="emp.showText = !emp.showText">{{emp.showText ? 'Hide' : 'Show'}}</button> 
 
     </p> 
 

 
     <div ng-show="emp.showText"> 
 
     <textarea rows="3" cols="50" ng-model="MyCtrl.data.sometext"></textarea><br> 
 
     <button ng-click="MyCtrl.testme(MyCtrl.data.sometext, emp); MyCtrl.data.sometext = ''">Submit</button> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

你有一些錯誤，在你的代碼，就像在跨採用NG-模型。這裏有一個具有一些改變工作的jsfiddle

HTML：

<div ng-controller="myCtrl"> 
    <span class="testclass" ng-click="showBox='true'">Show</span><br> 

    <div ng-show="showBox"> 
    <textarea rows="3" cols="50" ng-model="data.sometext"></textarea><br> 
    <button ng-click="testme(sometext)">Submit</button> 
    </div> 
</div> 

JS：

var ang = angular.module('myApp', []); 

ang.controller('myCtrl', ['$scope', function($scope) { 
    $scope.data = { 
    sometext:"" 
    }; 

    $scope.testme = function(text){ 
    $scope.showBox = false; 
    } 
}]); 

https://jsfiddle.net/lonking/qo7bngmq/

Answer 3

H1可以你嘗試初始化$ scope.showBox = FALSE;也是ng-click =「showBox = true」，而不是ng-click =「showBox ='true'」，因爲它是一個字符串形式。你的代碼在某種程度上是正確的，也可以嘗試點擊控制，保存在你的文本編輯器上就可以工作:)。