问题：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. C#改变LInqToSQL的引用地址，读取config的数据库字符串

    C#改变LInqToSQL的引用地址,读取config的数据库字符串修改Properties 下 Settings.Settings 下 Settings.Designer.cs 下 return ( ...

  2. C#一般处理程序 ashx.cs使用Session报错问题

    HttpContext.Current.Session["UserID"].ToString();//报错,报Session为Null, 此时需要添加引用和继承IRequiresS ...

  3. leetcode241

    public class Solution { public IList<int> DiffWaysToCompute(string input) { List<int> re ...

  4. 【转】如何使用Java、Servlet创建二维码

    归功于智能手机,QR码逐渐成为主流,它们正变得越来越有用.从候车亭.产品包装.家装卖场.汽车到很多网站,都在自己的网页集成QR码,让人们快速找到它们.随着智能手机的用户量日益增长,二维码的使用正在呈指 ...

  5. VS2010 rdlc报表无法显示“数据源”选项

  6. 第3章 ZooKeeper基本数据模型 3-1 zk数据模型介绍

    基本数据模型是zookeeper的重点. 它是参照Linux/Unix的目录结构. 子节点就相当于是父目录下的一个子目录,在zookeeper里面它是称之为节点,父节点和子节点,然后每一个节点就会有一 ...

  7. mybatis项目报错：java.sql.SQLException: ORA-00911: 无效字符 解决方法

    如果你用java写程序访问数据库,出现这个问题:java.sql.SQLException: ORA-00911: 无效字符 at oracle.jdbc.driver.DatabaseError.t ...

  8. 多线程 wait(),notify()方法,案例总结

    废话不多说,案例如下 package com.xujingyang.Exok; /** * 商品类 * @author 徐景洋 */ public class Goods { private Stri ...

  9. java中什么是代码点，什么是代码单元？

    1.代码点&代码单元,是从Unicode标准而来的术语,Unicode标准的核心是一个编码字符集,它为每一个字符分配一个唯一数字.Unicode标准始终使用16进制数字,并且在书写时在前面加上 ...

  10. noi.ac day5t1 count

    传送门 分析 首先一个很重要的性质是每个数至少出现一次 所以只有一个数会出现两次 我们只需要求出n+1个数选k个数的方案数再减去重复的部分即可 重复部分于两个相同数中间的距离有关,详见代码 代码 #i ...