Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-repeat does not work when array (or string) has non-unique values

Tags:

I have this line of code in my AngularJS template:

        <span ng-repeat="letter in word">{{letter}}&nbsp;</span>

'word' is a string. It works fine unless word contains the same letter twice. For example for the word 'boy' it works fine and renders the string "b o y ", but for the words 'ball' or 'elephant' nothing is rendered. The same problem occurs when iterating over an array of one letter strings.

Any ideas?

like image 812
Boaz Avatar asked Apr 02 '14 20:04

Boaz


People also ask

What can I use instead of NG-repeat?

You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

What does ng-repeat do?

The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.

How do I get the index of an element 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.


1 Answers

Change your repeater to use this:

<span ng-repeat="letter in word track by $index">{{letter}}&nbsp;</span> 

Docs: http://docs.angularjs.org/error/ngRepeat/dupes

like image 92
MBielski Avatar answered Sep 24 '22 09:09

MBielski