问题：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. import javax.servlet 出错(真的很管用)

    Error: The import javax.servlet cannot be resolved The import javax.servlet.http.HttpServletRequest ...

  2. tomcat urlwrite报错

    十二月 26, 2017 2:15:30 下午 org.apache.catalina.core.ApplicationContext logINFO: org.tuckey.web.filters. ...

  3. NSURLConnection基本用法（苹果原生）

    一.NSURLConnection的常用类 (1)NSURL:请求地址 (2)NSURLRequest/NSMutableURLRequest:封装一个请求,保存发给服务器的全部数据,包括一个NSUR ...

  4. Android 音频播放分析笔记

    AudioTrack是Android中比较偏底层的用来播放音频的接口,它主要被用来播放PCM音频数据,和MediaPlayer不同,它不涉及到文件解析和解码等复杂的流程,比较适合通过它来分析Andro ...

  5. eclipse安卓模拟器Failed to install on device 'emulator-5554': timeout处理方案

    我们在用模拟器调试的时候,经常会出现Failed to install on device 'emulator-5554': timeout这个错误.其实就是有些虚拟器在部署的时候时间过于长.系统就认 ...

  6. 获取字符串长度函数length()和hengthb()

    oracle获取字符串长度函数length()和hengthb() lengthb(string)计算string所占的字节长度:返回字符串的长度,单位是字节 length(string)计算stri ...

  7. 手动编译安装tmux

    tmux的好处就不多说了,总之是多屏管理的神器.通常我们用系统通用的安装方式可以安装到tmux,但有时候,安装到的可能不是我们所需要的版本,又或者软件源里面没有带tmux.这个时候就需要手动编译安装了 ...

  8. MD5 加密算法的使用

    最近在看视频时,看到 MD5 的加密算法,感觉其在某些重要信息中,还是很好的解决了一些安全问题的.于是,就在自己理解的情况下,实现了 MD5 算法. 具体的流程大致是: (1)将指定的数据首先通过 M ...

  9. solr注意事项-solrconfig中的默认搜索域会覆盖schema中的默认搜索域，注意copyfeild中被corp的字段搜索

    结论一:solrconfig.xml的默认搜索配置权限高于schema.xml中的默认搜索配置! 配置1:solrconfig.xml文件中关于select的配置: <requestHandle ...

  10. setex()

    设置值和有效期 $redis->setex($key, $expire, $value);//$expire,有效期,单位秒 相当于 SET key value//设置键值 EXPIRE key ...