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 ...
随机推荐
- ORACLE——日期时间格式化参数详解 之二
2.8 DD 指定日期在当月中第几天(范围:1-31) SQL> select to_char(sysdate,'DD YYYY-MM-DD PM hh24:mi:ss ') from dual ...
- Android源码中添加C可执行程序
在Android源码中添加C/CPP可执行程序一般保存在external目录中 下面是每个文件的内容 ①add.c #include "add.h" int add (int a, ...
- mybatis中in查询
xml配置 : <select id="selectPostIn" resultType="dasyskjcdtblVo"> SELECT SYS_ ...
- close、flush、read、readline、seek、tell、truncate、write的使用
1.close关闭文件 f1= open("ha.log","r+",encoding="utf-8") data = f1.read() ...
- 【总结整理】JS的继承
参考阮一峰的文章:http://javascript.ruanyifeng.com/oop/inheritance.html#toc4 function Shape() { this.x = 0; t ...
- 线段树教做人系列（2）HDU 4867 XOR
题意:给你一个数组a,长度为.有两种操作.一种是改变数组的某个元素的值,一种是满足某种条件的数组b有多少种.条件是:b[i] <= a[i],并且b[1]^b[2]...^b[n] = k的数组 ...
- SpringMVC_01 SpringMVC五大组件、SpringMVC编程步骤（不使用注解进行配置）、SpringMVC编程步骤（利用注解进行配置）、参数获取、响应数据
1 什么是SpringMVC 是一个mvc框架,用来简化基于mvc架构的web应用程序的 开发. 2 SpringMVC五大组件 DispatcherServlet (前端控制器) HanlderMa ...
- JavaScipt——Windows.document对象
四中选择器:class ,id , name , 标签 通过选择器获取对象: document.getElementById(''); -- id选择器 ...................... ...
- SQl Server 函数篇 聚合函数
说一下数据库中的聚合函数 函数使用必须加小括号(), 5种聚合函数: 1.max最大值 select max(price) from car where code='c024' --取这一列中 ...
- ubuntu16配置Mask-RCNN
一.安装Anaconda3 1.下载 下载地址:https://www.continuum.io/downloads 2.安装 在文件目录下执行:bash Anaconda3-4.2.0-Linux- ...