Question

背景：我是一个切换到前端开发的系统人员。和Angular一起玩耍。通过数据绑定获得了创意，现在我试图理解这种行为：

<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/

我希望这可以从任一个框中获取我的输入，在输入框之间镜像文本，并在底部自己的行重复每个字母。

如果我输入＆＃34; test＆＃34;在其中一个输入中，当重复一个字母时，ng-repeat将会中断。

按顺序输入字母按照我的预期进行操作。

为什么输入字母重复时ng-repeat会中断？我对此没有实际用处，我只是尝试使用Angular来获得乐趣，并且遇到了这个并且不理解它。

Answer 1

ng-repeat不接受重复的条目。由于test将t作为重复条目，因此会失败。

添加track by表达式以避免这种情况。

当我们不提供任何track by表达式时，条目（在本例中为每个字母）本身被视为唯一标识符，用于将条目链接到列表以跟踪其中的更改。

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

Answer 2

对阵列中的重复条目使用track by $index和ng-repeat。试试这个小提琴http://jsfiddle.net/1Lw11bqr/

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

2 个答案: