$指數並不降低其NG-如果當刪除元素值

我的HTML：

<section ng-repeat="Rule in Data track by $index" ng-if="!Rule.is_deleted"> 
    {{$index}} 
    {{ Rule.title }}<a ng-click="removeElem($index)"></a> 
</section>

和控制器：

$scope.removeElem = function (elemIndex) { 
    $scope.Data[elemIndex].is_deleted = true;    
} 

$scope.addElem = function(obj) { 
    $scope.Data.push(obj); 
}

有添加/移除的對象的功能性/從$scope.Data數組。假設$ scope.Data中有兩個項目;我正在刪除一個並添加一個新的。因此，這些項目仍然是兩個。問題是，$ index將新創建的第二個項目與值2相關聯，而不是像我預期的那樣將值1關聯（ng-if從DOM刪除項目，是不是？）。爲什麼？如果刪除某件商品，我如何要求$指數降低其價值？

來源

2016-12-29 Unknown developer

我不是太確定你在問什麼，你的情況下的$ index是正確的，「$ index將新創建的第二個項目與值2相關聯，而不是值1」，它應該是2，數組中現在有3個項目， '[0,1,2]'。 '1'已被'邏輯'刪除，但仍然存在，即新創建的項目具有索引「2」。 – TheSharpieOne

您可能想要filter而不是在ng-repeat中使用ng-if。

<section ng-repeat="Rule in (Data | filter: {is_deleted: false}) track by $index"> 
    {{$index}} 
    {{ Rule.title }}<a ng-click="removeElem($index)"></a> 
</section>

搗鼓出的差異：https://jsfiddle.net/u6nqrq5o/

來源

2016-12-29 16:56:56 TheSharpieOne

非常感謝。有用！但是，我仍然不明白爲什麼我的版本不起作用。有什麼好的解釋？ –

過濾器將創建一個新的數組，該數組不包含被過濾掉的項目，因此新的過濾數組中的所有項目都會顯示。現在'$ index'將不會**與原始數組中的實際索引一致，就像它之前所做的一樣。 – TheSharpieOne

我建議在'removeElem'函數運行後在控制器中進行過濾，而不是在DOM中。 DOM中的過濾器對於糟糕的性能而言有點臭名昭着，因爲它們的角度摘要循環被分開，所以它們運行的過濾函數WAY多於需要運行的過濾函數。 –

使用$指數應使用$指數avoided.Instead，更喜歡通過周圍的實際對象。例如。 ng-click =「removeElem（Rule）」

來源

2016-12-29 16:57:35

不要爲此使用$ index，只是將該對象傳遞給該函數。此外，這是一個更好的用例的過濾器，而不是使用NG-如果隱藏/顯示一排

HTML

<section ng-repeat="Rule in Data | filter: {is_deleted: false}"> 
    {{ Rule.title }} 
    <a ng-click="removeElem(Rule)">Remove</a> 
</section>

控制器

$scope.removeElem = function(rule) { 
    rule.is_deleted = true; 
};

來源

2016-12-29 17:06:30 jbrown

這是更好的解決方案。我的回答只顯示如何使用過濾器。這個解決方案做到了這一點，並繼續演示如何刪除一個元素將工作/應該工作。我只補充說應該使用'track by'並且通常會提高'ngRepeat'的性能 – TheSharpieOne

$指數並不降低其NG-如果當刪除元素值

回答

相關問題