以编程方式在 ng-repeat 中创建 ng-show 值答案

【问题标题】：Programmatically create an ng-show value in ng-repeat以编程方式在 ng-repeat 中创建 ng-show 值
【发布时间】：2013-08-23 06:28:30
【问题描述】：

我有以下：

  <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，但该代码不起作用，我不确定如何去做。

【问题讨论】：

标签： angularjs angularjs-ng-repeat ng-show

【解决方案1】：

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

或者类似的东西。

【讨论】：

我喜欢这个解决方案。非常感谢。

【解决方案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>

【讨论】：

【解决方案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

【讨论】：