问题：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解决循环对象出现重复项报错的问题的更多相关文章

  1. MO拆分计划行程序中写入PRODUCTIONORDERS表数据出现重复导致报错（BUG）20180502

    错误提示:ORA-00001: 违反唯一约束条件 (ABPPMGR.C0248833319_6192)ORA-06512: 在 "STG.FP_MO_SPLIT", line 19 ...

  2. 错误笔记 对象为null时调用改对象的方法会报错

    对象为null时调用改对象的方法会报错

  3. 解决Sublime包管理package control 报错 There are no packages available for installation

    解决Sublime包管理package control 报错 There are no packages available for installation 真的是哔了狗了,要不是我机智的重新安装了 ...

  4. 解决Maven项目中的无故报错的方法

    解决Eclipse+maven中的无故报错 错误: One or more constraints have not been satisfied. Deployment Assembly跟java版 ...

  5. 大神的---解决tomcat内存溢出问题----tomcat报错：This is very likely to create a memory leak问题解决

    tomcat memory leak解决方案 这种问题在开发中经常会碰到的,看看前辈的总结经验 Tomcat内存溢出的原因  在生产环境中tomcat内存设置不好很容易出现内存溢出.造成内存溢出是不一 ...

  6. gulp使用技巧-删除node_modules文件夹，解决目录层次太深删除报错的问题

    问题描述: 在使用gulp当中,自动生成的node_modules文件夹,因为文件目录层级太深,无法系统删除,用360粉碎工具也报错 解决方法: 使用npm中的插件rimraf,专门用于删除的模块插件 ...

  7. 解决 linux下编译make文件报错“/bin/bash^M: 坏的解释器：没有那个文件或目录” 问题

    PS背景:我在公司做sdk 的pc端开发,所以经常会在win下编译通过之后跑到linux下再运行一次已确保能支持多平台. 今儿在win下跑完一程序,然后放到linux下跑的时候,我用指令: [plai ...

  8. 解决Undefined symbols for architecture x86_64: 报错 和 ld: warning: ld: warning: ignoring file警告

    出现这种错误的情况: 用iphone5模拟器编译程序正常, 用iphone5s以上的模拟器编译出现Undefined symbols for architecture x86_64: 报错 和 ld: ...

  9. 解决alaert.builder二次调用报错的bug

    报错的代码是: The specified child already has a parent. You must call removeView() on the child's parent f ...

随机推荐

  1. Logstash-2.4.1的下载（图文详解）

    第一步:进入Elasticsearch的官网 https://www.elastic.co/ 第二步:点击downloads https://www.elastic.co/downloads 第三步: ...

  2. 地图投影的N种姿势（转载）

    转载地址:http://blog.sina.com.cn/s/blog_517eed9f0102w4rm.html 一篇题为<我们看到的地图一直都错得离谱……>的文章在朋友圈里莫名流行起来 ...

  3. cocos2dx中替代goto的用法：do{}while(0)和CC_BREAK_IF

    我们时常会调用某个函数来创建一个对象,但由于内存不足或其他异常情况发生时对象可能会创建失败,创建失败我们就要结束当前程序转到错误处理地方去处理错误或释放已生成的对象. int* p1 = new in ...

  4. 项目一:第十四天 1.在realm中动态授权 2.Shiro整合ehcache 缓存realm中授权信息 3.动态展示菜单数据 4.Quartz定时任务调度框架—Spring整合javamail发送邮件 5.基于poi实现分区导出

    1 Shiro整合ehCache缓存授权信息 当需要进行权限校验时候:四种方式url拦截.注解.页面标签.代码级别,当需要验证权限会调用realm中的授权方法   Shiro框架内部整合好缓存管理器, ...

  5. p3203 弹飞绵羊

    传送门 分析 基本的lct操作,建一个点N表示弹飞出去的点,每次输出N的左子树的大小即可 代码 #include<iostream> #include<cstdio> #inc ...

  6. 在windows远程提交任务给Hadoop集群（Hadoop 2.6）

    我使用3台Centos虚拟机搭建了一个Hadoop2.6的集群.希望在windows7上面使用IDEA开发mapreduce程序,然后提交的远程的Hadoop集群上执行.经过不懈的google终于搞定 ...

  7. php获取数据库结果集

    PHP经常要访问数据库提前数据库里面的数据,那么该怎么样去提前数据呢? 提取数据库代码如下: <?phpinclude("conn.php");//数据库连接 $sql=&q ...

  8. 在Tomcat启动时直接创建servlet(二)

  9. FileSaver.js导出json文件和文本

    最近刚刚写了个json数据导出生成Excel文件的,顺便总结下利用FileSaver.js导出其他文件的,这里要注意的一个点就是,当导出的是json文件或是txt文件时,导出的内容要是字符串,特别当时 ...

  10. c++特别要点：多态性与虚函数

    本来是准备在工厂模式中顺便整理.但粗略浏览了,内容还是很多,需要单独开一篇. 一.什么是多态性? 多态性可以概括为“一个接口,多种方法”. 多态与非多态的区别在于“成员函数调用地址的早绑定和晚绑定”. ...