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 ...
随机推荐
- 11-09SQLserver 基础-数据库之汇总练习45题
设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2的表 ...
- MongoDB中的查询
MongoDB中文文档:http://docs.mongoing.com/manual-zh/contents.html 这里以集合名称为test为例,数据库通过for循环插入一些测试数据,键分别为: ...
- 8-EasyNetQ之Send & Receive
鉴于Publish/Subsrcibe和Request/Response模式是位置透明的,在这个方面,你不需要去指定消息的消费者具体所处的位置,Send/Receive模式是特别针对通过命名队列来设计 ...
- SpringBoot10 整合JSP
1 整合JSP 1.1 导入相关依赖 JSP依赖.JSTL依赖 <?xml version="1.0" encoding="UTF-8"?> < ...
- 时间获取_Date\SimpleDateFormat\Calendar类
1.获取当前的日期,并把这个日期转换为指定格式的字符串,如2088-08-08 08:08:08 import java.text.SimpleDateFormat; import java.uti ...
- oracle环境变量配置
1.右键我的电脑--->属性--->高级系统设置 2.环境变量---->新建 总共配置三个变量(1) 变量名 ORACLE_HOME 变量值 G:\app\TH\product\11 ...
- R: 对向量中的每个元素，检查其是否包含某个“单词”
#检测一个字符串中,是否包含某个子串,是返回T,否返回Frequire(stringr) require(stringr) test <- c("这里有天气热敏感冒",&qu ...
- ARC059F
传送门 分析 见ptx大爷博客 代码 #include<iostream> #include<cstdio> #include<cstring> #include& ...
- 多线程学习-基础（六）分析wait()-notify()-notifyAll()
一.理解wait()-notify()-notifyAll()obj.wait()与obj.notify()必须要与synchronized(Obj)一起使用,也就是wait,notify是针对已经获 ...
- Linux文件概念
大多数资源,Linux都是以文件的方式来访问. Linux系统上的文件部分类型说明 –普通文件. •就是储存到磁盘上大家所操作的各种数据文件: –管道文件. •是一个从一端发送数据,从另一端接收数据的 ...