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

【问题标题】：Remove element from ng-repeat but, keep its HTML in dom从 ng-repeat 中删除元素，但将其 HTML 保留在 dom 中
【发布时间】：2024-04-12 06:45:01
【问题描述】：

我有一个数组badge = [{'name':'abc', 'flag': true}, {'name':'cde', 'flag': false}, {'name':'def', 'flag': true} ]

将它与ng-repeat 一起使用，并在浏览器上创建 dom。现在我需要从数组中删除具有标志false 的元素，但是保持HTML（由ng-repeat 创建）在浏览器中保持不变。

【问题讨论】：

将该数组复制到另一个数组并执行 ng-repeat

标签： javascript jquery angularjs angularjs-scope

【解决方案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>

【讨论】：

我需要保持元素可见并禁用它。
我认为你没有抓住重点，太糟糕了，因为代码很好 sn-p！编辑 - 被 atulquest 8) 短路了
什么？能详细点吗？

【解决方案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?

【讨论】：

【解决方案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 类）。

【讨论】：

【解决方案4】：

您可以将两个 ng-repeat 并排放置，并让第二个最初为空，而您的第一个则显示为空。然后您可以将其从第一个数组中删除并放入第二个数组中。

这样您可以移除元素，但仍将其保留在 DOM 中。

【讨论】：