首页 >> 大全

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

2023-09-03 大全 37 作者:考证青年

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

报错:

_重复循环次数错误_excel循环错误

划重点

解决办法:加上track by $index

excel循环错误__重复循环次数错误

       <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>

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了