角度不清除文本输入

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 ，将Show textarea 。 当我单击按钮时，文本区域变为空白。 就像我想要的。 但是div不是隐藏的。 我想在单击按钮时隐藏div。 试图使ng-show false但无法正常工作。

谢谢。

Answer 1

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

从ngModel文档中：

ngModel指令使用NgModelController将输入，选择，文本区域（或自定义窗体控件）绑定到作用域上的属性，该属性由该指令创建和公开。

我更改了您的代码，以使其更清晰地演示。 现在，该代码使用控制器作为语法，以更清楚地表明数据所属位置，并且跨度已更改为按钮。 有关语法和这样做的好处，请参见控制器的AngularJS示例 。

以下说明：

1）单击显示按钮时，该emp的showText属性设置为true。

2）因为作用域已经更新，所以将调用$digest循环， ngShow div标签上ngShow指令内的表达式进行求值。 那些将emp的showText属性设置为true的对象将评估为true，然后显示包含textarea的div元素。

3）单击“提交”按钮时，将调用controller上的testme函数，并从MyCtrl.data.sometext和emp中MyCtrl.data.sometext的textarea ngModel指令传入绑定值，以便我们可以更改其属性。 将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

您的代码中有一些错误，例如在span中使用ng-model。 在这里，您可以使用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

您好，您可以尝试初始化$ scope.showBox = false;吗？ 也是ng-click =“ showBox = true”而不是ng-click =“ showBox ='true'”，因为它是字符串形式。 您的代码在一定程度上是正确的，也可以尝试将控件保存到文本编辑器上才可以工作:)。