问题：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. Java enum（枚举）使用详解之四

    用法五:实现接口 所有的枚举都继承自java.lang.Enum类.由于Java 不支持多继承,所以枚举对象不能再继承其他类. public interface Behaviour { void pr ...

  2. python jvm数据

    在网上找的抱歉忘了原链接了额 #!/usr/bin/env python # # import os import commands import re import sys (status1, re ...

  3. getParameter的用法及含义

    equest.getparameter用来获取页面输入框输入的数据例如:jsp页面学员账户:<input type="text" name="username&qu ...

  4. 【总结整理】webGIS须知

    一般WebGIS项目中,前端展示数据的流程基本是先做数据入库.服务发布.然后前端调用展示 a.动态出图可以使用WMS中的GetMap请求. b.矢量查询可以使用WFS中的GetFeature请求. c ...

  5. 恢复oracle的回收站的所有的表

    使用sys as sysdba 进入到sqlplus的控制界面 sqlplus / as sysdba 执行相关的命令,自动生成一个脚本文件 spool d:/a.sql select 'flashb ...

  6. css田字格布局

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  7. Swingr的JTextField、JPasswordField设置圆角输入框

    方法1:定义Border,然后给JTextField设置即可 摘自并整理:https://blog.csdn.net/u012093968/article/details/39316679 最好添加这 ...

  8. IP地址及子网掩码计算

    主机号全0表示网络号,主机号全1表示广播地址 我们都知道,IP是由四段数字组成,在此,我们先来了解一下3类常用的IP A类IP段 0.0.0.0 到127.255.255.255 B类IP段 128. ...

  9. 小小c#算法题 - 11 - 二叉树的构造及先序遍历、中序遍历、后序遍历

    在上一篇文章 小小c#算法题 - 10 - 求树的深度中,用到了树的数据结构,树型结构是一类重要的非线性数据结构,树是以分支关系定义的层次结构,是n(n>=0)个结点的有限集.但在那篇文章中,只 ...

  10. java的get请求

    package com.huazhu; import java.io.BufferedReader; import java.io.IOException; import java.io.InputS ...