angularjs - 以编程方式在 ng-repeat 中创建一个 ng-show 值

Question

我有以下内容:

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

因此在我的 Controller 中我可以执行一个操作，在本例中为 remove()，它将切换该属性。

scope.remove = function(uniqueAttribute) {
  $scope[uniqueAttribute] = false;

我能够使用 $index 生成 html，但该代码不起作用，我不确定如何着手完成此操作。

Answer 1

您可以为每个对象添加一个名为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