CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-filter
TMG
TMG

Reputation: 2740

How to preserve DOM elements when using ng-repeat with filter?

I have an ng-repeat with a filter. When some items are filtered out by the filter and then they are restored after another filter change there are new DOM elements created for these items. If there was any DOM manipulation on the item it gets lost after item is hidden and restored with filter.

Is there a way to keep the DOM elements, even when item is removed by filter?

I tried using track by, but it doesn't help.

Here is a fiddle that recreates the problem. Steps to recreate:

  1. Click the button to apply colors to DOM elements
  2. Type something in the filter input (for example 'ap') to hide some of the elements
  3. Remove the filter. The restored elements lost their style.

Upvotes: 1

Views: 382

Answers (1)

Erik Donohoo
Erik Donohoo

Reputation: 653

Angualr is dynamically adding and removing those templates. By template I mean whatever tag(s) are inside your ng-repeat. There is no way to preserve that in an ng-repeat. Instead, if you want this color change to be preserved, it needs to be a part of the model you are ng-repeat ing over. Does that make sense?

Add the color directly to the template style="color: {{fruit.color}}"

See this for what I am talking about

http://jsfiddle.net/nferjvsp/1/

Upvotes: 2

Related Questions