Question

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

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

Answer 1

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

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

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

＆＃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;

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

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

1 个答案: