AngularJS ng-repeat数组有重复值的解决方法

前言

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

如：

$scope.items = [
 'red',
 'blue',
 'yellow',
 'white',
 'blue'
];

这个数组blue就重复了，html这么遍历它

<li ng-repeat="item in items">{{ item }}</li>

控制台就会抛出一个错误：

点击错误链接到Angular官网看详细错误，官网明确给出是因为值重复了：

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in items, Duplicate key: string:blue, Duplicate value: blue

解决方法

这就纳闷了，正常的业务里数组有重复的值是很正常的，数组要硬要搞成唯一的ng-repeat才能遍历就白瞎了，继续往下看，发现官网给了一个解决的方案

<div ng-repeat="value in [4, 4] track by $index"></div>

于是按照这个方案改了一下

<li ng-repeat="item in items track by $index">{{ item }}</li>

刷新网页，内容被正常解析

其实ng-repeat还是需要一个唯一的key，只不过你不track的话默认就是item本身，另外也只有在普通数据类型字符串，数字等才会出现这个问题，如果换成Object

$scope.items = [
 ['red'],
 ['blue'],
 ['yellow'],
 ['white'],
 ['blue']
];

html恢复为

<li ng-repeat="item in items">{{ item }}</li>

执行结果：

不明白的童鞋那就自己看看下面的运算表达式，猜猜结果是什么，然后在浏览器的控制台试一试你的答案是否正确

[] === []

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • AngularJs ng-repeat 嵌套如何获取外层$index

    一个真实项目的例子是遍历表格的行和列, 每一行需要显示当前是第几行, 我立刻想到用$index, 简直就如同砍瓜切菜般, 一切都那么行云流水, 简直太容易了, 于是有了下面这段代码. <!-- repeat data row --> <tr ng-repeat="row in rows track by row.id"> <td ng-repeat="col in row.columns track by col.id"> <

  • AngularJS入门（用ng-repeat指令实现循环输出

    循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去. 用AngularJS就爽多了,语法和JSP类似: <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title&g

  • Angularjs中ng-repeat的简单实例

    Angularjs中ng-repeat的简单实例 第一个例子:使用ng-repeat最简单的例子 <html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="angular.min.js" charset="utf-8"></scri

  • AngularJS使用ng-repeat指令实现下拉框

    AngularJS使用ng-repeat指令实现下拉框

    AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题.下面给大家分享在项目中使用ng-repeat指令实现下拉框. 1.问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之

  • angularjs在ng-repeat中使用ng-model遇到的问题

    在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况了,只能先简单介绍一下无法获取的情景该如何解决. 例如: html: <body> <div ng-controller="selectController"> <div ng-repeat="pop in citylist"

  • AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值               最近做项目遇到了ng-model是ng-repeat动态生成的,ng-model="变量",什么变量,是未知的,所以你无法在$scope."变量"取到值,就算取到值也是其中一个值,这样的问题,经过百度一番查找找到解决方案,这里记录下,也行可以帮助到大家. 代码 html <div> <div class="modal-header"

  • Angularjs的ng-repeat中去除重复数据的方法

    本文实例讲述了Angularjs的ng-repeat中去除重复数据的方法.分享给大家供大家参考,具体如下: 一.JS: ngApp.filter('unique', function () { return function (collection, keyname) { var output = [], keys = []; angular.forEach(collection, function (item) { var key = item[keyname]; if (keys.index

  • AngularJS实践之使用ng-repeat中$index的注意点

    发现问题 最近有客户投诉,说在删除指定的某条记录时,结果删掉的却是另外一条记录!看起来是个很严重的BUG. 有一次我们在工作中碰到了这个问题. 要定位这个BUG非常麻烦, 因为客户也不清楚如何重现这个问题. 后来发现这个Bug是由于在 ng-repeat 中使用了 $index 引发的. 一个简单动作(action)的列表 先来看看一个完整有效的ng-repeat示例. <ul ng-controller="ListCtrl"> <li ng-repeat="

  • AngularJS ng-repeat数组有重复值的解决方法

    AngularJS ng-repeat数组有重复值的解决方法

    前言 大家都知道默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的. 如: $scope.items = [ 'red', 'blue', 'yellow', 'white', 'blue' ]; 这个数组blue就重复了,html这么遍历它 <li ng-repeat="item in items">{{ item }}</li> 控制台就会抛出一个错误: 点击错误链接到Ang

  • MySQL 处理插入过程中的主键唯一键重复值的解决方法

    MySQL 处理插入过程中的主键唯一键重复值的解决方法

    本篇文章主要介绍在插入数据到表中遇到键重复避免插入重复值的处理方法,主要涉及到IGNORE,ON DUPLICATE KEY UPDATE,REPLACE:接下来就分别看看这三种方式的处理办法. IGNORE 使用ignore当插入的值遇到主键(PRIMARY KEY)或者唯一键(UNIQUE KEY)重复时自动忽略重复的记录行,不影响后面的记录行的插入, 创建测试表 CREATE TABLE Tignore (ID INT NOT NULL PRIMARY KEY , NAME1 INT )d

  • ASP.NET数组删除重复值实现代码

    ASP.NET数组删除重复值实现代码

    根据这段代码,自己编写了一个小程序作为代码资料参考,方便以后可以直接拿来用,不需要网上找.如果你觉得还不错的话,就把它收藏起来吧! 1.前台代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>数组删除重复值</title> </head> <body> <form id="for

  • Java数组,去掉重复值、增加、删除数组元素的方法

    Java数组,去掉重复值、增加、删除数组元素的方法

    如下所示: import java.util.List; import java.util.ArrayList; import java.util.Set; import java.util.HashSet; public class lzwCode { public static void main(String [] args) { testA(); System.out.println("==========================="); testB(); System

  • JS实现数组去重复值的方法示例

    JS实现数组去重复值的方法示例

    本文实例讲述了JS实现数组去重复值的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • JS两个数组比较,删除重复值的巧妙方法(推荐)

    偶尔需要我们比较两个数组,在一个数组中删除另一个数组存在的值.我们常常用的方法是循环比较判断并删除,最近看到另一个好方法巧妙删除的例子: var arr1 = ["i", "b", "c", "d", "e", "f","x"]; //数组A var arr2 = ["a", "b", "c", "

  • JavaScript去除数组里重复值的方法

    本文实例讲述了JavaScript去除数组里重复值的方法.分享给大家供大家参考.具体如下: var unique = function(origArr) { var newArr = [], origLen = origArr.length, found, x, y; for ( x = 0; x < origLen; x++ ) { found = undefined; for ( y = 0; y < newArr.length; y++ ) { if ( origArr[x] === n

  • Java数组,去掉重复值、增加、删除数组元素的实现方法

    Java数组,去掉重复值、增加、删除数组元素的实现方法

    如下所示: import java.util.List; import java.util.ArrayList; import java.util.Set; import java.util.HashSet; public class lzwCode { public static void main(String [] args) { testA(); System.out.println("==========================="); testB(); System

  • java使用Hashtable过滤数组中重复值的方法

    本文实例讲述了java使用Hashtable过滤数组中重复值的方法.分享给大家供大家参考,具体如下: package org.eline.core.web.support; import java.util.Hashtable; /***************************** * * @author zdw * */ public class ObjectFilter { public static void main(String[] args) { // String 测试 S

  • JavaScript几种数组去掉重复值的方法推荐

    数组去重复是一个常见的需求,我们暂时考虑同类型的数组去重复.主要是理清思路和考虑下性能.以下方法,网上基本都有,这里只是简单地总结一下. 思路: 1.遍历数组,一一比较,比较到相同的就删除后面的 2.遍历数组,一一比较,比较到相同的,跳过前面重复的,不相同的放入新数组 3.任取一个数组元素放入新数组,遍历剩下的数组元素任取一个,与新数组的元素一一比较,如果有不同的,放入新数组. 4.遍历数组,取一个元素,作为对象的属性,判断属性是否存在 1. 删除后面重复的: function ov1(arr)

随机推荐