AngularJs ng-repeat解决循环对象出现重复项报错的问题
问题：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>
AngularJs ng-repeat解决循环对象出现重复项报错的问题的更多相关文章
- MO拆分计划行程序中写入PRODUCTIONORDERS表数据出现重复导致报错（BUG）20180502
错误提示:ORA-00001: 违反唯一约束条件 (ABPPMGR.C0248833319_6192)ORA-06512: 在 "STG.FP_MO_SPLIT", line 19 ...
- 错误笔记 对象为null时调用改对象的方法会报错
对象为null时调用改对象的方法会报错
- 解决Sublime包管理package control 报错 There are no packages available for installation
解决Sublime包管理package control 报错 There are no packages available for installation 真的是哔了狗了,要不是我机智的重新安装了 ...
- 解决Maven项目中的无故报错的方法
解决Eclipse+maven中的无故报错 错误: One or more constraints have not been satisfied. Deployment Assembly跟java版 ...
- 大神的---解决tomcat内存溢出问题----tomcat报错：This is very likely to create a memory leak问题解决
tomcat memory leak解决方案 这种问题在开发中经常会碰到的,看看前辈的总结经验 Tomcat内存溢出的原因 在生产环境中tomcat内存设置不好很容易出现内存溢出.造成内存溢出是不一 ...
- gulp使用技巧-删除node_modules文件夹，解决目录层次太深删除报错的问题
问题描述: 在使用gulp当中,自动生成的node_modules文件夹,因为文件目录层级太深,无法系统删除,用360粉碎工具也报错 解决方法: 使用npm中的插件rimraf,专门用于删除的模块插件 ...
- 解决 linux下编译make文件报错“/bin/bash^M: 坏的解释器：没有那个文件或目录” 问题
PS背景:我在公司做sdk 的pc端开发,所以经常会在win下编译通过之后跑到linux下再运行一次已确保能支持多平台. 今儿在win下跑完一程序,然后放到linux下跑的时候,我用指令: [plai ...
- 解决Undefined symbols for architecture x86_64: 报错 和 ld: warning: ld: warning: ignoring file警告
出现这种错误的情况: 用iphone5模拟器编译程序正常, 用iphone5s以上的模拟器编译出现Undefined symbols for architecture x86_64: 报错 和 ld: ...
- 解决alaert.builder二次调用报错的bug
报错的代码是: The specified child already has a parent. You must call removeView() on the child's parent f ...
随机推荐
- 安卓读取SD卡的容量
在开发中,我们经常会用到SD卡,那么在对SD卡进行读写的时候,我们经常需要判断SD卡的剩余容量是否足够.因此,这次我们来写写获取SD卡容量的程序. 该注意的地方,我都在程序里面有注明了.看程序基本就懂 ...
- Solr5.5.3的研究之路 ---1、从Mysql导入数据并创建索引
公司需要用到全文检索,故使用Solr,也是新人一枚,本人查看的前提是Solr已经安装部署成功,我用的服务器是自带的Jetty 1.创建Collection [root@whoami bin]# ./s ...
- 安装完Ubuntu 14.04后的几件事
周末折腾一下Ubuntu 14.04,稍作记录: 1. 切换源,我还是钟情163的(ps, 这里如果用的以前13.04时候163的源会有问题,记得配置最新的http://mirrors.163.com ...
- day35-hibernate映射 05-Hibernate的一级缓存：快照区
SessionImpl里面有很多的Java集合,很多java集合才构成了一级缓存.一级缓存里面有一个非常特殊的区域叫做快照区.SessionImpl实现了Session接口,有很多Java集合(包括M ...
- [poj1509]Glass Beads(最小表示法)
题目大意:求循环同构的字符串的最小字典序. 解题关键:最小表示法模板题. #include<cstdio> #include<cstring> #include<algo ...
- SQL语句兼容性规范
一.DDL兼容性规范(防止表结构变更后,原有的SQL执行报错)只能增加字段或修改字段长度(字段长度改大),不能修改字段名字和类型,不能删除字段不能删除表或者修改表名称 二.DML兼容性规范insert ...
- SpringBoot10 整合JSP
1 整合JSP 1.1 导入相关依赖 JSP依赖.JSTL依赖 <?xml version="1.0" encoding="UTF-8"?> < ...
- IDEA01 创建java项目、创建web项目
注意:本教程使用的开发环境是:(专业版) 1 创建javaSE项目 1.1 file -> new -> project 注意:如果是第一次使用,就需要配置 project SDK , ...
- SpringMVC_04 拦截器 【拦截器的编程步骤】【session复习？】
待更新... 2017年5月13日22:45:31 1 什么是拦截器 spring提供的一个特殊组件,前端控制器 DispacherServlet 在收到请求之后,会先调用拦截器,再调用处理器(Co ...
- javascript 函数，事件
1.函数字符串函数 var s=new string(); var ss="hello world"; var sss=""HELLO, WORLD" ...