從ng-repeat中刪除元素，但將其HTML保留在dom中

Question

我有一個數組badge = [{'name':'abc', 'flag': true}, {'name':'cde', 'flag': false}, {'name':'def', 'flag': true} ]

與ng-repeat一起使用，並且dom是在瀏覽器上創建的。 現在，我需要從數組中刪除標記為false元素，但是要保持HTML（由ng-repeat創建）在瀏覽器中的作用。

Answer 1

使用filter

 angular.module('myApp', []); function HelloCntl($scope) { $scope.badge = [{ 'name': 'abc', 'flag': true }, { 'name': 'cde', 'flag': false }, { 'name': 'def', 'flag': true }] } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> <div ng:app="myApp"> <div ng-controller="HelloCntl"> <ul> <li ng-repeat="b in badge | filter:{flag:true}"> <span>{{b.name}}</span> <span>{{b.flag}}</span> </li> </ul> </div> </div> 

Answer 2

使用一次綁定。 這樣，當您更改模型時，DOM將不會在第一次加載后再次反映出來。

<ul>
      <li ng-repeat="b in ::badge">
        <span>{{b.name}}</span>
        <span>{{b.flag}}</span>
      </li>
</ul>

要禁用刪除的內容，請使用具有常規雙向綁定的ng-class 。

對於一次性綁定，請使用google或參閱嵌套在一次懶惰的ng-repeat綁定內的綁定是否僅綁定一次？

Answer 3

在您的HTML中使用類似：

<ul ng-repeat="(key,value) in badge">
  <li ng-show="value.flag">{{value.name}}</li>
</ul>

使用ng-if會將元素從DOM中刪除。 使用ng-show只會將其從DOM中隱藏（使用ng-hidden類）。

Answer 4

您可以將兩個ng-repeats相鄰放置，並讓第二個ng-repeat最初為空，而第一個為空白。 然后，您可以從第一個數組中刪除它，然后將其放入第二個數組中。

這樣，您可以刪除元素，但仍將其保留在DOM中。