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

Question

我希望能够在单击 item.label 时隐藏 item.value 或仅通过单击按钮隐藏所有内容。我不太确定 "hide" 变量在这里是如何相关的。据我了解，它们是在隔离范围内单独创建的，因此我的按钮应该不起作用。这里的解决方案是什么？

<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 的变化以显示（如果值是假的）或隐藏（如果值不是假的）。最初，items 数组没有设置隐藏属性，所以它们都是 undefined，计算结果为假值，因此项目在初始显示时默认不隐藏。一旦设置了项目的隐藏属性（通过使用 ng-click 表达式执行控制器的 toggleHide 方法或控制器的 hideAll 方法）。

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

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

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

此答案利用了 angular 1.x 的较新版本的一些功能（控制器生命周期方法和一次性绑定——none 其中包含 Whosebug 代码段Angular 1.2).

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

How do I reference and set all scope variables created from ng-click within ng-repeat?

angularjs

angularjs-scope