Angular 不清除文本输入

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-show false 但它不起作用。

谢谢。

Answer 1

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

来自 ngModel 文档：

The ngModel directive binds an input, select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

我已经更改了您的代码以使其更易于演示。代码现在使用控制器作为语法，使数据所属的位置更加清晰，并且跨度已更改为按钮。请参阅控制器的 AngularJS example 作为语法以及这样做的好处。

演示如下：

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

2) 由于范围已更新，因此评估 div 标记上的 $digest cycle is called and the expression within the ngShow 指令。将 emp 的 showText 属性设置为 true 的那些将评估为 true，然后显示包含 textarea 的 div 元素。

3) 当您单击 "Submit" 按钮时，您的 controller 上的 testme 函数被调用，从 textarea ngModel 指令保存在 MyCtrl.data.sometext 和 emp 中，因此我们可以更改它的属性。将 emp 的 text 属性设置为输入，并将 showText 属性设置回 false，然后再次隐藏文本区域。

// 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'" 因为它是字符串形式。您的代码在一定程度上是正确的，也可以尝试在您的文本编辑器上点击控制保存可能会起作用:)。

Angular 不清除文本输入

Angular not clearing text input

javascript

angularjs

angularjs-ng-show