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.

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

Answer 2

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?

Answer 3

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).

Answer 4

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.