AngularJS ng-repeat 重复元素

Question

由于某些奇怪的原因，这个 jsfiddle example 中的代码在迭代关联值数组时复制元素。输入字段正确显示 3 个名称，但每个名称的字段重复 3 次。更令人困惑的是，{{ p.name }} 在每次迭代中显示的值与 ng-model="p.name" 不同。索引分别显示 3 次 0、1 和 2。为什么每个元素会有 3 次迭代？

Controller :

var app=angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.people = [
        { name:'Tom', age:5 }, 
        { name:'Dick', age:6 }, 
        { name:'Harry', age:7 }
];

}

HTML:

<div ng-controller="MyCtrl">
    <form> 
    <ul>
        <li ng-repeat="p in people">{{$index}}, {{$first}}, {{$middle}}, {{$last}}, {{p.name}}, {{p.age}}
            <input type="text" ng-model="p.name">
        </li>
    </ul>      
    </form>
</div>

对这段代码有什么问题有什么想法吗？

Answer 1

你有两次包含 AngularJS。

一次在“框架和扩展”下，第二次在“外部资源”下。