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

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <title>Document</title>
    6. 

  6. </head>
    7. 

  7. <body ng-app="myApp">
    8. 

  8.     <!--
    9. 

  9.         ng-init:初始化数据
    10. 

  10.         ng-init="person={name:'小明'}"
    11. 

  11.      -->
    12. 

  12.     <div ng-app="myApp" ng-controller="myController">
    13. 

  13.         <input type="text" ng-model="iptValue">
    14. 

  14.         <input type="button" ng-click="clickFn()" value="按钮">
    15. 

  15.         <ul>
    16. 

  16.             <li ng-repeat="v in arr track by $index">{{v}}</li>
    17. 

  17.         </ul>
    18. 

  18.     </div>
    19. 

    20. 

  20. </body>
    21. 

  21. <script type="text/javascript" src="angular.min.js"></script>
    22. 

  22. <script type="text/javascript">
    23. 

  23. // [] ---> 依赖
    24. 

  24. var app = angular.module("myApp",[]);
    25. 

  25. // $scope作用域：作用域范围myController
    26. 

  26. app.controller("myController",function($scope){
    27. 

  27.     $scope.arr = ["111","222"];
    28. 

  28.     $scope.clickFn = function(){
    29. 

  29.         var v = $scope.iptValue;
    30. 

  30.         $scope.arr.push(v);
    31. 

  31.         $scope.iptValue = "";
    32. 

  32.     }
    33. 

  33. });
    34. 

  34. </script>
    35. 

  35. </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. window下使用MyCat实现简单的读写分离

    参考文档 MyCat权威指南 MyCat项目主页 学会数据库读写分离.分表分库--用Mycat,这一篇就够了! MyCat安装 Java SDK下载(必须JDK7或更高版本) MYSQL下载 (MyC ...

  2. ClamAV学习【6】—— cli_load函数浏览

    (老爸回家,就放开心和他到处走,累……趁其和老妈聊天之际,再继续看代码) 参数选项,加载病毒都浏览得七七八八了,这里就贴个简单的函数注释吧.哈哈. 代码注释如下: int cli_load(const ...

  3. linux命令之用户管理及用户信息查询命令（上）

    1.useradd:创建用户 该命令用于创建新的用户或者更改用户的信息. 参数 说明 -g 指定用户对应的用户组,用户组 -s 用户登录后使用的Shell名称 -u 用户的ID值 示例: 1)user ...

  4. COOKIE的优化与购物车小试

    由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 :  --> 点击这里 一 Cookie 的优化 1.1 一般而言,我们设置cookie是在ph ...

  5. 某种带权有向无环图(graph)的所有路径的求法

    // 讨论QQ群:135202158 最近做某个东西,最后用图实现了,这里总结一下算法. 假设有以下带权有向无环图(连通或非连通,我这里用的是非连通的): 每个节点(node)可能与其他节点有向地相连 ...

  6. 爬虫3：requests库

      一个简单易用的http库,多用于第一步,爬取网站源码   简单例子 import requests   response = requests.get('https://www.baidu.com ...

  7. django model改变后，同步数据库

    在使用django进行开发时,往往需要根据不同的需求对model进行更改.而这时候,python manage.py syncdb就不好使了. 目前有个很好的工具,是south,这个是专门用来更改mo ...

  8. gitLab创建自己的私有库

    一.创建私有库的流程简介 创建一个项目,留着后面的流程3制作私有库 在可以创建私有库的地方创建一个code repository, code repository是代码仓库,我们把代码上传到这个仓库. ...

  9. Android NDK开发及OpenCV初步学习笔记

    https://www.jianshu.com/p/c29bb20908da Android NDK开发及OpenCV初步学习笔记 Super_圣代 关注 2017.08.19 00:55* 字数 6 ...

  10. python 异步IO（syncio） 协程

    python asyncio 网络模型有很多中,为了实现高并发也有很多方案,多线程,多进程.无论多线程和多进程,IO的调度更多取决于系统,而协程的方式,调度来自用户,用户可以在函数中yield一个状态 ...