nested ng-repeats in angular not updating view

Question

I have some nested controllers each called with ng-repeat.

The bottom level item has the ability to remove itself which it does via a ng-click event. This event splices the item from the array.

In the plunkr below, if you delete the second item (item2), then the array is left with item1 and item3, but the view sees item1 and item2. The sub controllers are never called again and the cached controllers are used.

How can I manually force these controllers to be refreshed? Shouldn't angular do this for me?

http://plnkr.co/edit/jDidC4anikwjZSLMWct6?p=preview

Davin Tryon · Accepted Answer · 2014-03-07 17:16:49Z

3

You are currently tracking by $index which will not update the way you want:

Here is an updated plunker.

The only change I made was to take out the track by $index in pitem in items track by $index (toplevel.html):

<div ng-repeat="pitem in items" ng-include="" src="'mid-level.html'" ng-controller="midlevel">test</div>

EDIT:

track by $index will use the $index value as the equality check when deciding what to update in the ng-repeat. So this is what is happening:

After set up we have [i: 0, name: 'item1', i: 1, name: 'item2', i: 2, name: 'item3']
item2 is spliced out
track by $index sees there has been a change and checks if $index with value 0 and 1 still exist in the array
They do, so no update is performed
However $index with value 3 is not there
So, it is updated and removed

edited Mar 7, 2014 at 17:16

answered Mar 7, 2014 at 12:20

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

3 Comments

bbahov Over a year ago

Also why using the syntacs ng-include="" src="'mid-level.html'" when you can use directly ng-include"'mid-level.html'"

MatB Over a year ago

Thanks very much!!! Is there any documentation about why the track by is not working as I expect?

Davin Tryon Over a year ago

@MatB I have added a detailed breakdown of how using $index is breaking the expected behaviour.

Lalit Sachdeva · Accepted Answer · 2014-03-07 12:30:42Z

0

Yes the problem is you are making check on item.name, but you are storing updated list in pitems.name, so if you update your code in mid-level.html from

{{item.name}} <span ng-click="delete(items, $index)">x</span>

to

{{pitem.name}} <span ng-click="delete(items, $index)">x</span>

this is working fine.

answered Mar 7, 2014 at 12:30

Lalit Sachdeva

6,6512 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

nested ng-repeats in angular not updating view

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related