Remove element from ng-repeat but, keep its HTML in dom

Question

I have an array badge = [{'name':'abc', 'flag': true}, {'name':'cde', 'flag': false}, {'name':'def', 'flag': true} ]

used it with ng-repeat and dom is created on browser. Now i need to delete element having flag false from array but, keep the HTML (created by ng-repeat) entact in browser.

Copy that array into another one and do ng-repeat – Syam Pillai May 27 '16 at 07:05 — Syam Pillai, May 27 '16 at 07:05

Rayon · Accepted Answer · 2016-05-27T07:22:13.097

1

Use 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>

edited May 27 '16 at 07:22

answered May 27 '16 at 07:10

Rayon

36,219
4
49
76

I need to keep the element visible and just disable it. – Atul Sharma May 27 '16 at 07:14
I think you're missing the point, too bad because nice code snippet! edit - got short-circuited by atulquest 8) – Jay May 27 '16 at 07:16
What ? Can you elaborate ? – Rayon May 27 '16 at 07:18

score 1 · Answer 2 · edited May 23 '17 at 12:16

Use one time binding. So that when you change model then DOM will not be reflected again after first time load.

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

For disabling the deleted things, use ng-class with normal two way binding.

For one time binding please google, or refer Do bindings nested inside of a lazy one-time ng-repeat binding bind just once?

score 0 · Answer 3 · answered May 27 '16 at 07:10

0

In your HTML use something like:

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

Using ng-if will remove the element from the DOM. Using ng-show will just hide it from the DOM (using ng-hidden class).

answered May 27 '16 at 07:10

Chirag

567
5
20

score 0 · Answer 4 · answered May 27 '16 at 07:10

You could put two ng-repeats next to each other and have the second one initially empty and your first one as you show it. Then you can delete it from the first array and put it in the second one.

This way you can remove the element, but still keep it in the DOM.

Remove element from ng-repeat but, keep its HTML in dom

4 Answers4