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 ...
随机推荐
- javascript——对象的概念——函数 2 (内建函数与类型转换)
javascript 有许多内建函数,用于各种操作,以下为常用的内建方法. 1.parseInt(object,int):将输入的 int 进制的值 object 转换为 10 进制的数值: obje ...
- Oracle——基础知识（一）
一.Oracle中的数据类型 1.字符串类型.如:char.nchar.varchar2.nvarchar2.2.数值类型.如:int.number(p,s).integer.smallint. ...
- IOS 屏幕尺寸
型号 屏幕尺寸(英寸) 分辨率(pt) 像素分辨率(px)iPhone 3G 3.5 320*480 480x320iPhone 3GS 3.5 320*480 480x320iPhone4 3. ...
- Luogu 1484 种树
Luogu 1792 算是双倍经验. 我们考虑对于一个点,我们要么选它,要么选它周围的两个点. 所以我们考虑用一个堆来维护,每次从堆顶取出最大值之后我们把它的权值记为:它左边的权值加上它右边的权值减去 ...
- for与break的用法
# Auther: Aaron Fan age_of_oldboy = 56 #执行3次循环for i in range(3): guess_age = int(input("猜一下oldb ...
- PartyLocation.get请求
1.PartyLocationDto:partyDto 2.PartyLocationConverter: 3.PartyDto:Public PartyDto 4.PartyLocationToPa ...
- input 输入框两种改变事件的方式
一.在输入框内容变化的时候不会触发,当鼠标在其他地方点一下才会触发 $('input[name=myInput]').change(function() { ... }); 二.在输入框内容变化的时候 ...
- 《Spring实战》-2
装配Bean 1.装配wiring,即创建应用对象之间的协作关系的行为,者也是依赖注入的本质. 2.创建Spring配置 从Sring3.0开始,Spring容器提供了两种配置Bean的方式: XML ...
- linux linux系统常用设置
linux linux系统常用设置 一.设置开机时开启数字键 修改rc.local文件 命令:vi /etc/rc.local rc.local文件中增加如下代码: INITTY=/dev/tty ...
- seleniumIDE是Firefox的录制功能使用
selenium第二课(脚本录制seleniumIDE的使用) 转自:https://www.cnblogs.com/hustar0102/p/5906958.html 一.Selenium也具有录制 ...