AngularJS数据绑定中断ngRepeat+奇怪行为

AngularJS Data Binding Breaks ngRepeat + Strange Behavior

本文关键字：ngRepeat+ 数据绑定 中断 AngularJS      更新时间：2023-09-26

背景：我是一名系统人员，后来转到前端开发。只是和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/

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

如果我在其中一个输入中键入"test"，当一个字母重复时，ng repeat将中断。

按顺序键入字母表正如我所期望的那样。

当输入的字母重复时，为什么ng重复break？我对此没有实际用途，我只是为了好玩而尝试Angular，但遇到了这个问题，我不理解它。

ng repeat将不接受重复条目。由于test有t作为重复条目，它将失败。

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

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

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

将track by $index与ng repeat一起用于数组中的重复项。试试这把小提琴http://jsfiddle.net/1Lw11bqr/

相关文章：