问题：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. git clone 某一特定分支<转>

    网上搜索自己想要的答案,往往会搜大一大堆感觉没用的,或者看不懂的东西, 最好终于找到了想要答案,特记录一下: ============================================= ...

  2. css的relative与absolute（一）

    relative与absolute是position的两个值,本文对这两个值得关系进行了一个小实验 实验一: 首先定义了两个div元素,代码如下所示: <!doctype html> &l ...

  3. fluent仿真数值错误

  4. AudioManager 音量『转』

    获取系统音量 通过程序获取android系统手机的铃声和音量.同样,设置铃声和音量的方法也很简单! 设置音量的方法也很简单,AudioManager提供了方法: publicvoidsetStream ...

  5. 全文检索技术---Lucene

    1       Lucene介绍 1.1   什么是Lucene Lucene是apache下的一个开源的全文检索引擎工具包.它为软件开发人员提供一个简单易用的工具包(类库),以方便的在目标系统中实现 ...

  6. go语言的第一个helloworld

    1.新建一个hello.go文件 添加如下代码: package main  // 代码包声明语句. import "fmt" //系统包用来输出的 func main() { / ...

  7. C++面向对象类的实例题目十一

    题目描述: 写一个程序计算三角形,正方形和圆形3种图形的面积 程序代码: #include<iostream> #include<cmath> #define PAI 3.14 ...

  8. IFC标准 IFCWALLSTANDARDCASE参数说明

    例如: #229= IFCWALLSTANDARDCASE('3_ydjarPr1s9tRASGqIAUD',#41,'\X2\57FA672C5899\X0\:\X2\78165899\X0\240 ...

  9. (转)C++中使用C代码

    昨晚看书的时候碰到一个问题,在C++中如何调用C代码...于是查了一下资料...发现了一个大神写的文章挺好的. -------------------------------------------- ...

  10. Linux cpulimit命令

    一.简介 http://www.3lian.com/edu/2015/06-12/221261.html 二.安装 http://toutiao.com/a6184908783490073090/ 三 ...