Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-repeat not working over collections that contains dupes

The following code is not working because the collection contains dupes:

<div ng-repeat="value in [4, 4]"></div>

I think that the following should work but is unfortunately not working:

<div ng-repeat="value in [4, 4] track by $index"></div>

Is that a bug?

Is there a way to use ng-repeat over a collection that contains dupes?

Thanks in advance,

Olivier

like image 587
odwl Avatar asked Dec 08 '13 10:12

odwl


People also ask

What can I use instead of NG-repeat?

But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

How do I get an index value in ng-repeat?

Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.

What is track by $Index in Angularjs?

"track by" tells the angular js that how angular js will track the association between DOM and the model (i.e. collection). Internally angular js uses "track by $id(obj)" for this purpose. You can use track by $index if you do not have a unique identifier.


1 Answers

This feature has been added to AngularJS in newer versions. the point is that basically you should not iterate over some primitive types (e.g. numbers) but over some complex objects.

from what I've understood the ngRepeat directive checks the references not the actual values so if you iterate over some complex objects it woks but if you try to do that over a set of primitive types it will most likely not work as long as "all" the values differ from one another.

EDIT

The following lines are copies and pasted from this link (and make sure you are using a relatively up-to-date version of AngularJS - I'm using 1.1.5 and it's working perfectly -)

Description

Occurs if there are duplicate keys in an ngRepeat expression. Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items.

By default, collections are keyed by reference which is desirable for most common models but can be problematic for primitive types that are interned (share references).

For example the issue can be triggered by this invalid code:

<div ng-repeat="value in [4, 4]">
</div>

To resolve this error either ensure that the items in the collection have unique identity of use the track by syntax to specify how to track the association between models and DOM.

To resolve the example above can be resolved by using track by $index, which will cause the items to be keyed by their position in the array instead of their value:

<div ng-repeat="value in [4, 4] track by $index"></div>
like image 192
Kia Panahi Rad Avatar answered Oct 04 '22 03:10

Kia Panahi Rad