編程創建NG重複的NG-顯示值

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

}

我能夠生成使用$指數的HTML，但代碼不工作，我肯定不知道如何去實現這一點。

Answer 1

大多數屬性在角要麼評價或插值。評估就像是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); 
    } 
}; 

或類似的東西。

Answer 2

您可以爲每個對象添加一個名爲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

Answer 3

你不需要在角度的屬性使用{{ }}。它會自動評估你的範圍。

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