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文档：

ngModel指令绑定输入，select，textarea（或自定义表单）使用NgModelController对范围内的属性进行控制由该指令创建和公开。

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

以下演示：

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

2）由于范围已更新，因此会调用$digest周期，并评估div标记上ngShow指令中的表达式。将emp的showText属性设置为true的那些将评估为true，然后显示包含div的{{1}}元素。

3）当您点击＆＃34;提交＆＃34;按下textarea上的testme功能按钮，从controller和textarea中保存的MyCtrl.data.sometext ngModel指令传入绑定值，以便我们更改它的属性。将emp的text属性设置为输入，并将showText属性设置回false，以便再次隐藏textarea。

＆＃13;

// 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;

    }

  }

})();

＆＃13;

<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>

＆＃13;

Answer 2

您的代码中存在一些错误，例如在跨度中使用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不清除文本输入

3 个答案: