问题:ng-repeat 的循环对象是不能出现重复项的,所以如果有重复的就会报错,应该是 key value的问题吧,不是很了解内部运行机制;经过查询发现 在 循环后面加上 track by $index 就会解决问题,也就可以有重复对象了
报错:
划重点
<ul> <li ng-repeat="x in names track by $index"> {{x}}.{{lastname}} <button ng-click="delPerson($index)">删除</button> </li> </ul>
完整栗子:
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="myContrl"> <h1>{{lastname}}家族成员:</h1> <ul> <li ng-repeat="x in names track by $index"> {{x}}.{{lastname}} <button ng-click="delPerson($index)">删除</button> </li> </ul> <p>添加成员: <input type="text" ng-model="name" placeholder="请输入需要添加的成员名字"> </p> <button ng-click="addPerson(name)">确认添加</button> </div> <script> angular.module(‘myapp‘,[]) .controller(‘myContrl‘,function ($scope,$rootScope) { // $rootScope 根作用域,在素有的控制器中都可以用 $scope.name = ‘‘; $scope.names = ["name1","name2","name3","name4","name4"]; $scope.sayHellow = function () { $scope.greeting = "Hello," + $scope.name + "!"; } $scope.delPerson = function (index) { // 将点击删除的对象从数组中移除,angular会自动更新列表 $scope.names.splice(index,1); } $scope.addPerson = function (name) { // 输入的对象添加到数组,angular会自动更新列表 $scope.names.push(name); } $rootScope.lastname = "Refsnes"; }); //手动初始化 angular.bootstrap(document,[‘myapp‘]); </script> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。