从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中。