我希望能够在点击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>
答案 0 :(得分:1)
您应该使用点语法,并且在每个项目模型中,您可以使用切换按钮切换每个项目的隐藏属性。这样,您就可以通过item.hide
表达式隐藏每个项目。
Angular的ng-hide指令在表达式上创建一个监视。当计算表达式的值发生更改时,它会触发对DOM的更改(如果值为false)或隐藏(如果值不是false)。最初,items
数组没有设置hide属性,因此它们都是undefined
,其计算结果为falsey值,因此默认情况下初始显示时项不会隐藏。一旦设置了项目的隐藏属性(通过使用ng-click表达式来执行控制器的toggleHide方法或控制器的hideAll方法)。
这些是角度表达式和核心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;
}
};
});
&#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片段一起提供。)