AngularJS数据绑定破坏了ngRepeat +奇怪的行为

Question

Background : I'm a systems guy who switched to Front End development. Just dorking around with Angular. Got creative with data binding and now I'm trying to understand this behavior:

<div ng-app>
    <div class="container">Name
        <input type="text" ng-model="user.name">
    </div>{{ user.name }}
    <div class="container">Name
        <input type="text" ng-model="user.name">
    </div>
    <ul ng-model="user.name">
        <li ng-repeat="l in user.name">{{ l }}</li>
    </ul>
</div>

http://jsfiddle.net/Lpm74dd8/

I would expect this to take my input from either box, mirror the text between the input boxes, and repeat each letter on its own line at the bottom.

If I type "test" in one of the inputs, ng-repeat will break when a letter repeats.

Typing the alphabet sequentially works as I expect.

Why does ng-repeat break when input letters are duplicated? I have no practical use for this, I was just experimenting with Angular for fun and came across this and don't understand it.

Answer 1

ng-repeat will not accept duplicate entries. As test has t as duplicate entry, it will fail.

Add track by expression to avoid this.

When we do not provide any track by expression the entry(in this case each letter) itself is treated as a unique identifier to link the entry to the list to track the changes in it.

<li ng-repeat="l in user.name track by $index">{{ l }}</li>

Answer 2

Use track by $index with ng-repeat for dupilcate entries in array. Try this fiddle http://jsfiddle.net/1Lw11bqr/