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 ...
随机推荐
- jdbcTemplate学习(一)
概述 Spring JDBC抽象框架core包提供了JDBC模板类,其中JdbcTemplate是core包的核心类,所以其他模板类都是基于它封装完成的,JDBC模板类是第一种工作模式. JdbcTe ...
- leetcode645
vector<int> findErrorNums(vector<int>& nums) { ; int S[N]; int n = nums.size(); ; i ...
- Vue基础汇总
1)双向绑定: <div id="app"> <p>{{message}}</p> <input v-model="messag ...
- Eclipse 快键键(持续更新)
本人抛弃一些简单常见的快键键,例如 ctrl+c ,+v ,+z之类的 1.ctrl+d 删除一整行 2.ctrl+f 搜索 3.光标选中几行,ctrl+alt+↓ 向下复制选中的那几行 4.光标 ...
- C语言基础问题总结
Double 类型用 %f 接受会产生错误,应该用%lf C语言中SIN,COS的参数为弧度,角度应先转换为弧度才能计算,否则出错 三角形的判断条件,任意两边长度和大于第三边 闰年判断条件整百年为40 ...
- Struts2框架07 Struts2 + Spring + Mybatis 整合
1 导包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.o ...
- 27-1/x+1/y=1/n
链接:https://www.nowcoder.com/acm/contest/90/F来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...
- 算法Sedgewick第四版-第1章基础-1.4 Analysis of Algorithms-003定理
1. 2. 3. 4. 5. 6.
- 算法Sedgewick第四版-第1章基础-007一用两个栈实现简单的编译器
1. package algorithms.util; import algorithms.ADT.Stack; /****************************************** ...
- eclipse打包第三方jar的超简便方法
原帖地址 http://wenku.baidu.com/link?url=0kCBUc-7g4pGgXUrBA2jdCRkrSQmQzaDgGT59TyECAundF8c6R9yxy4EaBN3L8c ...