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

1
votes

I recently updated angular from 1.1.5 to 1.2.14.

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

  1. ng-repeat renders as normal

  2. enter text into filter model input : ng-repeat does not filter

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

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

2
angularjs
Share your code, it's really hard to guess what's wrong without it. - Th0rndike
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

2 Answers

2
votes

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

0
votes

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!