我有以下内容:
<div class="row" ng-repeat="item in items " ng-cloak>
<div ng-show="unique{{$index}}" class="ng-hide">
<button ng-click="remove('{{$index}})">Remove</button>
</div>
我想为重复的每个div项创建一个唯一值,如下所示:
<div ng-show="unique1" class="ng-hide">
<button ng-click="remove('unique1')">Remove</button>
<div ng-show="unique2" class="ng-hide">
<button ng-click="remove('unique2')">Remove</button>
这样在我的控制器中我可以有一个动作,在这种情况下是remove(),它将切换该属性。
scope.remove = function(uniqueAttribute) {
$scope[uniqueAttribute] = false;
}
我能够使用$ index生成html但该代码不起作用,我肯定不确定如何完成此操作。
答案 0 :(得分:3)
您可以为每个对象添加一个名为show
的新字段,然后您可以删除与$index
相关的所有逻辑。
<div ng-app ng-controller="Ctrl">
<div class="row" ng-repeat="item in items" ng-cloak>
<div ng-show="item.show">
<button ng-click="remove(item)">Remove</button>
</div>
</div>
</div>
function Ctrl($scope) {
$scope.items = [{
item1: 1,
show: true
}, {
item1: 2,
show: true
}, {
item1: 3,
show: false
}];
$scope.remove = function (item) {
item.show = false;
}
}
的 DEMO 强>
答案 1 :(得分:2)
您无需在angular的属性中使用{{ }}
。它会自动评估您的范围。
<div class="row" ng-repeat="item in items" ng-cloak>
<div ng-show="'unique' + $index" class="ng-hide">
<button ng-click="remove('unique' + $index)">Remove</button>
</div>
答案 2 :(得分:2)
Angular中的大多数属性都是评估或插值。评估类似于eval()
的限制形式,插值是在填充双花括号时。看起来你期望ng-show
被插值然后被评估,但没有内置指令这样做。他们做一个或另一个但不是两个。对于ng-show
来说,它只是进行评估,所以你的花括号直接传递。这将是一个无效的表达。
我的建议如下:由于ng-repeat
为每个重复的项目创建了一个新范围,您可以这样做:
<div class="row" ng-repeat="item in items" ng-cloak>
<div ng-show="!hide" class="ng-hide">
<button ng-click="hide = true">Remove</button>
</div>
当然,为什么要保留一堆隐藏的物品。为什么不使用ng-click="remove(item)"
和删除项目的删除功能?然后ng-repeat
自然更新。
$scope.remove = function(item) {
var index = this.items.indexOf(item);
if (index != -1) {
this.items.splice(index);
}
};
或类似的东西。