ng-repeat="v in arr track by $index"

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Document</title>
  6. </head>
  7. <body ng-app="myApp">
  8. <!--
  9. ng-init:初始化数据
  10. ng-init="person={name:'小明'}"
  11. -->
  12. <div ng-app="myApp" ng-controller="myController">
  13. <input type="text" ng-model="iptValue">
  14. <input type="button" ng-click="clickFn()" value="按钮">
  15. <ul>
  16. <li ng-repeat="v in arr track by $index">{{v}}</li>
  17. </ul>
  18. </div>
  19. </body>
  20. <script type="text/javascript" src="angular.min.js"></script>
  21. <script type="text/javascript">
  22. // [] ---> 依赖
  23. var app = angular.module("myApp",[]);
  24. // $scope作用域:作用域范围myController
  25. app.controller("myController",function($scope){
  26. $scope.arr = ["111","222"];
  27. $scope.clickFn = function(){
  28. var v = $scope.iptValue;
  29. $scope.arr.push(v);
  30. $scope.iptValue = "";
  31. }
  32. });
  33. </script>
  34. </html>
 

1.现象

  1. <ul ng-app="myApp" ng-controller="myCtrl">
  2. <li ng-repeat="x in items">
  3. <strong>{{x}}</strong>
  4. </li>
  5. </ul>
  6. <script>
  7. //使用ng-repeat 重复 html代码
  8. var app = angular.module('myApp', []);
  9. app.controller('myCtrl', function ($scope) {
  10. $scope.items = [1, 2, 3, 2];
  11. });
  12. </script>

当数组中有重复项时,抛出异常

点击异常链接,没有看到异常

2.解决方法

默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的。

指定跟踪值唯一可以了

  1. <ul ng-app="myApp" ng-controller="myCtrl">
  2. <li ng-repeat="x in items track by $index">
  3. <strong>{{x}}</strong>
  4. </li>
  5. </ul>
  6. <script>
  7. //使用ng-repeat 重复 html代码
  8. var app = angular.module('myApp', []);
  9. app.controller('myCtrl', function ($scope) {
  10. $scope.items = [1, 2, 3, 2];
  11. });
  12. </script>

AngularJs ng-repeat重复项异常解决方案的更多相关文章

  1. Part 6 AngularJS ng repeat directive

    ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...

  2. 关于:未能加载文件或程序集“ICSharpCode.SharpZipLib”或它的某一个依赖项异常的解决方案

    问题: 今天项目迁移忽然又个ICSharpCode.SharpZipLib.dll 程序包丢失了,于是我在网上下载一个这样的包,结果程序运行就提示:未能加载文件或程序集“ICSharpCode.Sha ...

  3. AngularJs ng-repeat解决循环对象出现重复项报错的问题

    问题:ng-repeat  的循环对象是不能出现重复项的,所以如果有重复的就会报错,应该是 key value的问题吧,不是很了解内部运行机制:经过查询发现 在 循环后面加上  track by $i ...

  4. sed tr 去除PATH中的重复项

    最近发现由于自己不良的安装软件的习惯,shell的PATH路径包含了很多冗余的项.这里使用shell命令去除PATH的冗余项. export PATH=$(echo $PATH | sed 's/:/ ...

  5. 【python cookbook】【数据结构与算法】10.从序列中移除重复项且保持元素间顺序不变

    问题:从序列中移除重复的元素,但仍然保持剩下的元素顺序不变 解决方案: 1.如果序列中的值时可哈希(hashable)的,可以通过使用集合和生成器解决.

  6. sql分组合并字段重复项sql for xml path

    -------------------------(情景描述) 在我们处理数据时,可能会碰到这种情景: Id                Name 1                  a,b 2  ...

  7. 每日一道 LeetCode (8):删除排序数组中的重复项和移除元素

    每天 3 分钟,走上算法的逆袭之路. 前文合集 每日一道 LeetCode 前文合集 代码仓库 GitHub: https://github.com/meteor1993/LeetCode Gitee ...

  8. [LeetCode] Find All Duplicates in an Array 找出数组中所有重复项

    Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and others ...

  9. [LeetCode] Remove Duplicates from Sorted List 移除有序链表中的重复项

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

随机推荐

  1. JS中移除非数字,最多保留一位小数

    //去除非数字 var clearNoNum = function (item) { if (item!=null && item!=undefined) { //先把非数字的都替换掉 ...

  2. 在VC++中执行VBS代码

    此代码来自https://blog.csdn.net/zhu2695/article/details/13770671 作者: zhu2695   时间:2013年10月31日 13:08:41 #i ...

  3. c# in out ref关键字

    class in_out_ref { #region in 关键字 delegate void DContravariant<in A>(A argumen); static void o ...

  4. NIO-直接内存

    写NIO程序经常使用ByteBuffer来读取或者写入数据,那么使用ByteBuffer.allocate(capability)还是使用ByteBuffer.allocteDirect(capabi ...

  5. 1087 1 10 100 1000(打表 set 数学)

    1087 1 10 100 1000 题目来源: Ural 1209 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 1,10,100,1000... ...

  6. jquery源码解析:attr,prop,attrHooks,propHooks详解

    我们先来看一下jQuery中有多少个方法是用来操作元素属性的. 首先,看一下实例方法: 然后,看下静态方法(工具方法): 静态方法是内部使用的,我们外面使用的很少,实例方法才是对外的. 接下来,我们来 ...

  7. [转] 打开 CMD 时自动执行命令

    [转] 打开 CMD 时自动执行命令 问题描述 在Windows中打开一个command-prompt时,我正在寻找一种方法来执行一些控制台命令,特别是设置一些命令别名. 例如,当打开command- ...

  8. mxonline实战5,用户注册的验证码

        github对应地址:验证码好麻烦     一. 安装 配置 1. pip install django-simple-captcha 2. add captcha to the INSTAL ...

  9. docker微服务部署之:二、搭建文章微服务项目

    docker微服务部署之:一,搭建Eureka微服务项目 一.新增demo_article模块,并编写代码 右键demo_parent->new->Module->Maven,选择M ...

  10. Spark构成

    RDD Spark基本的数据结构叫弹性分布式数据集(Resilient Distributed Datasets,简称RDD). 概念: 一个分布于集群节点的只读数据集合,并以容错的.并行的方式进行维 ...