如何在ng-repeat中引用和设置从ng-click创建的所有范围变量?

时间:2017-10-24 23:45:39

标签: angularjs angularjs-scope

我希望能够在点击item.label时隐藏item.value,或者只需单击按钮隐藏所有内容。我不太确定"隐藏"变量在这里是相关的。据我所知,它们是在一个独立的范围内单独创建的,所以我的按钮不起作用。这里有什么解决方案?

<button ng-click="hide=false">HideAll</button>
<div ng-repeat="item in items">
     <div ng-click="hide=!hide">item.label</div>
     <div ng-hide="hide">item.value</div>
</div>

1 个答案:

答案 0 :(得分:1)

您应该使用点语法,并且在每个项目模型中,您可以使用切换按钮切换每个项目的隐藏属性。这样,您就可以通过item.hide表达式隐藏每个项目。

Angular的ng-hide指令在表达式上创建一个监视。当计算表达式的值发生更改时,它会触发对DOM的更改(如果值为false)或隐藏(如果值不是false)。最初,items数组没有设置hide属性,因此它们都是undefined,其计算结果为falsey值,因此默认情况下初始显示时项不会隐藏。一旦设置了项目的隐藏属性(通过使用ng-click表达式来执行控制器的toggleHide方法或控制器的hideAll方法)。

这些是角度表达式和核心ng指令的基础知识。

&#13;
&#13;
angular.module('myApp', [])
  .controller('MainController', function () {
    this.$onInit = function $onInit() {    
      this.items = [
        {value: 'Item 1'},
        {value: 'Item 2'},
        {value: 'Item 3'}
      ];
    };
    
    this.toggleHide = function toggleHide(item) {
      item.hide = !item.hide;
    };
    
    this.hideAll = function hideAll() {
      var items = this.items;
      for (var i = 0; i < items.length; ++i) {
        items[i].hide = true;
      }
    };
  });
&#13;
<script src="//code.angularjs.org/1.6.5/angular.js"></script>
<div ng-app="myApp" ng-controller="MainController as mc">
  <button ng-click="mc.hideAll()">Hide All</button>
  <div ng-repeat="item in mc.items">
    <div><button ng-click="mc.toggleHide(item)">Toggle</button></div>
    <div ng-hide="item.hide">{{::item.value}}</div>
  </div>
</div>
&#13;
&#13;
&#13;

这个答案正在利用角度1.x的更新版本的一些功能(控制器生命周期方法和一次性绑定 - 其中没有一个随Angular 1.2的stackoverflow片段一起提供。)