Angular adds extra dom elements in ng-repeat when using filter

Question

I recently updated angular from 1.1.5 to 1.2.14.

Now the filters in the ng-repeats produce some unexpected behavior:

ng-repeat renders as normal
enter text into filter model input : ng-repeat does not filter
remove text from input and angular adds extra dom elements to the ng-repeat, basically repeating the ng-repeat. The array bound to the ng-repeat does not change though.
repeating steps 2 and 3 causes more elements to be added

I have tried to recreate this in PLUNKR and it works fine. Any idea what could be causing this?

code:

<input type="text" data-ng-model="query" >

<div class="default-add" data-ng-repeat="array in arrays.arrays | orderBy:'name' | filter:{name: query}">
    <div class="default-add-image">
       <h1>{{array.title}}</h1>
    </div>
</div>

The data is valid json, I have tested with mock data and have the same error.

Thanks

Share your code, it's really hard to guess what's wrong without it. — Th0rndike
– Th0rndike, Commented Apr 3, 2014 at 8:35
I add the same issue and solved it in the same manner. i had 2 nested ng-repeat <ul ng-repeat=".."> <li> <ul ng-repeat=".."> <li> ..</li> </ul> </li></ul> — eran otzap
– eran otzap, Commented Sep 19, 2015 at 17:23

user3310447 · Accepted Answer · 2014-04-04 12:00:04Z

2

Removing the NG-REPEAT from the repeated element and adding it to a parent container solved it.

answered Apr 4, 2014 at 12:00

user3310447

1352 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eran otzap Over a year ago

I add the same issue and solved it in the same manner. i had 2 nested ng-repeat <ul ng-repeat=".."> <li> <ul ng-repeat=".."> <li> ..</li> </ul> </li></ul> any ideas why this happens ?

ŁukaszBachman · Accepted Answer · 2014-04-03 08:38:18Z

0

If it is running in Plunker fine, then most likely the problem lies in your code. Is this a custom filter? If yes, I would start looking there. If not, then I would check if it works properly on artificial data (thinking that the data might be the issue). If this does not work, then look at your data provider. If this works, then look into how you are processing the data.

I doubt that this is Angular's bug. I migrated from 1.0.7 to 1.2.x recently without such problem (there were few, but all fixed easily by following migration guidelines from Angular team).

Hope that helps!

answered Apr 3, 2014 at 8:38

ŁukaszBachman

33.8k11 gold badges68 silver badges74 bronze badges

4 Comments

user3310447 Over a year ago

Updated answer with some comments

ŁukaszBachman Over a year ago

What will happen if you remove | orderBy:'name' | filter:{name: query} from the ng-repeat directive? Will it show results properly then?

user3310447 Over a year ago

Yes, the error only occurs when the filter is applied.

ŁukaszBachman Over a year ago

Which elements are added to the DOM? Can you add them to the ticket description?

Collectives™ on Stack Overflow

Angular adds extra dom elements in ng-repeat when using filter

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related