angularjs - AngularJS ng-repeat 重复元素

Question

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

控制器：

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。

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