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，或参考Do bindings nested inside of a lazy one-time ng-repeat binding bind just once?

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

你可以将两个重复的重复放在一起，让第二个重复为空，而你的第一个则显示为空。然后你可以从第一个数组中删除它并将它放在第二个数组中。

这样你可以删除元素，但仍然将它保存在DOM中。

从ng-repeat中删除元素，但是将其HTML保留在dom

4 个答案: