AngularJs ng-repeat解决循环对象出现重复项报错的问题

最新推荐文章于 2024-05-17 13:52:13 发布

weixin_30498921

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量285

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/DZzzz/p/10188427.html

版权

问题：ng-repeat 的循环对象是不能出现重复项的，所以如果有重复的就会报错，应该是 key value的问题吧，不是很了解内部运行机制；经过查询发现在循环后面加上 track by $index 就会解决问题，也就可以有重复对象了

报错：

划重点

解决办法：加上 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>

转载于:https://www.cnblogs.com/DZzzz/p/10188427.html

weixin_30498921

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs ng-repeat解决循环对象出现重复项报错的问题

问题：ng-repeat 的循环对象是不能出现重复项的，所以如果有重复的就会报错，应该是 key value的问题吧，不是很了解内部运行机制；经过查询发现在循环后面加上track by $index 就会解决问题，也就可以有重复对象了报错：划重点解决办法：加上track by $index <ul> &lt...
复制链接

扫一扫