ng-repeat指令在迭代对象时的去重方法

刚刚遇到一个问题：

在使用AngularJS的ng-repeat指令时，遇到了数据重复出现的问题。

可能有的人会想到，ng-repeat迭代时，遇到重复的数据不是会报错么？

当然了，如果你迭代的是数组，而且数据类型时字符串或者数字时，ng-repeat指令就会自动报错。而且解决办法也很简单， 加个track by $index就能解决。

而我的问题是，在迭代对象时，因为对象中有重复的数据，而我需要的是重复的数据只显示一条，也就是去重。因为迭代的是对象，所以ng-repeat并不会给你报错，而是会一条一条的给你遍历出来。

百度了很久都没有相关的问题，最后只能自己琢磨了。

以上是问题。

如何解决呢？

很简单，下面是解决办法，直接上代码：

<select v-model="option" >
   <option value="">--------请选择--------</option>
   <option v-repeat="item in deals" v-hide="deals[$index].accNum == deals[$index+1].accNum">{{item.accNum}}</option>
</select>

搭配使用一个ng-hide指令，即加一条判断语句，如果遍历过程中的一条数据和上一条的数据相同，那么就会触发hide事件，自然就去重了。

以上就是解决办法。希望对大家有用。

这篇ng-repeat指令在迭代对象时的去重方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS基础 ng-repeat 指令简单示例

    AngularJS ng-repeat 指令 AngularJS 实例 循环输出多个标题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <

  • Angular ng-repeat 对象和数组遍历实例

    直接上代码 <!DOCTYPE html> <html> <head> <meta name="description" content="[Ngrepeat in obj and arr]"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script

  • angularjs中判断ng-repeat是否迭代完的实例

    angular中的ng-repeat指令会自动迭代数组然后你就可以将这些迭代的数据在页面逐条显示.但是怎样才知道数据迭代完了,其实还是有方法的,今天就介绍一种方法来判断ng-repeat是否已经迭代完.众所周知ng-repeat会为每一个repeat的对象创建一个控制器,我们就利用这个来判断. 首先我们要定义一个数组 $scope.testArrray = [ {id: 1, value: 1}, {id: 2, value: 2}, {id: 3, value: 3}, {id: 4, val

  • Angular ng-repeat指令实例以及扩展部分

    Angular ng-repeat指令实例以及扩展部分

    在前面的文章中学习filter过滤器,现在在结合着看看ng-repeat指令,举个例子. <div ng-controller="Aaa"> <table border="1"> <tr> <th ng-click="fnSort('name')">颜色</th> <th ng-click="fnSort('age')">值</th> <

  • ng-repeat指令在迭代对象时的去重方法

    刚刚遇到一个问题: 在使用AngularJS的ng-repeat指令时,遇到了数据重复出现的问题. 可能有的人会想到,ng-repeat迭代时,遇到重复的数据不是会报错么? 当然了,如果你迭代的是数组,而且数据类型时字符串或者数字时,ng-repeat指令就会自动报错.而且解决办法也很简单, 加个track by $index就能解决. 而我的问题是,在迭代对象时,因为对象中有重复的数据,而我需要的是重复的数据只显示一条,也就是去重.因为迭代的是对象,所以ng-repeat并不会给你报错,而是会

  • java8实现List中对象属性的去重方法

    java8的stream流能完美解对象集合去重问题. List<UserCar> list1 = new ArrayList(); UserCar userCar = new UserCar(); userCar.setId(1); userCar.setCarNo("AA"); list1.add(userCar); UserCar userCar1 = new UserCar(); userCar1.setId(2); userCar1.setCarNo("A

  • 浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器

    浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器

    1.iterable iterator区别 要了解两者区别,先要了解一下迭代器协议: 迭代器协议是指:对象需要提供__next__()方法,它返回迭代中的元素,在没有更多元素后,抛出StopIteration异常,终止迭代. 可迭代对象就是:实现了迭代器协议的对象. 协议是一种约定,可迭代对象实现迭代器协议,Python的内置工具(如for循环,sum,min,max函数等)通过迭代器协议访问对象,因此,for循环并不需要知道对象具体是什么,只需要知道对象能够实现迭代器协议即可. 迭代器(ite

  • python学习之可迭代对象、迭代器、生成器

    python学习之可迭代对象、迭代器、生成器

    Iterable – 可迭代对象 能够逐一返回其成员项的对象. 可迭代对象的例子包括所有序列类型 (例如 list, str 和 tuple) 以及某些非序列类型例如 dict, 文件对象以及定义了__iter__()方法或是实现了序列语义的__getitem__() 方法的任意自定义类对象. 可迭代对象可用于 for 循环以及许多其他需要一个序列的地方(zip().map() -).当一个可迭代对象作为参数传给内置函数 iter() 时,它会返回该对象的迭代器.这种迭代器适用于对值集合的一次性

  • 一文搞懂​​​​​​​python可迭代对象,迭代器,生成器,协程

    目录 设计模式:迭代 python:可迭代对象和迭代器 为什么要有生成器? python的生成器实现 协程 设计模式:迭代 迭代是一种设计模式,解决有序便利序列的问题.通用的可迭代对象需要支持done和next方法. 伪代码如下: while not iterator.done(): item = iterator.next() ..... python:可迭代对象和迭代器 python的可迭代对象需要实现__iter__()方法,返回一个迭代器.for循环和顶级函数iter(obj)调用obj

  • JavaScript详解类数组与可迭代对象的实现原理

    JavaScript详解类数组与可迭代对象的实现原理

    目录 可迭代对象(Iterable object) Symbol.iterator 把对象本身构造成迭代器 String也是可迭代的 String的迭代器 类数组对象和可迭代对象 Array.from 总结 可迭代对象(Iterable object) 数组是一个特殊的对象,它和普通对象的区别不仅仅在于元素的顺序访问.存储.另外一个重要的区别是:数组是可迭代的,也就是可以使用for ... of语句访问(迭代)所有的元素. 我们可以简单的做一个小实验: let arr = [1,2,3,4,5]

  • python生成器，可迭代对象，迭代器区别和联系

    python生成器，可迭代对象，迭代器区别和联系

    生成器,可迭代对象,迭代器之间究竟是什么关系? 用一幅图来概括: 1.生成器 定义生成器 方式一: //区别于列表生成式 gen = [x*x for x in range(5)] gen = (x*x for x in range(5)) print(gen) //Out:<generator object <genexpr> at 0x00000258DC5CD8E0> 方式二: def fib(): prev, curr = 0, 1 while True: yield cu

  • Python cookbook（数据结构与算法）从任意长度的可迭代对象中分解元素操作示例

    Python cookbook（数据结构与算法）从任意长度的可迭代对象中分解元素操作示例

    本文实例讲述了python从任意长度的可迭代对象中分解元素操作.分享给大家供大家参考,具体如下: 从某个可迭代对象中分解出N个元素,但是可迭代对象的长度可能超过N,会出现"分解值过多"的异常: 使用"*表达式"来解决该问题: Python 3.4.3 (v3.4.3:9b73f1c3e601, Feb 24 2015, 22:43:06) [MSC v.1600 32 bit (Intel)] on win32 Type "copyright",

  • 浅析Angular 实现一个repeat指令的方法

    在项目中常常会使用 ngFor指令,之前只会使用它,具体如何实现的却不得而知.终于这几天有时间"研究"了下它是如何实现的,顺便自己写个简单的 ngFor指令:repeat 说到指令就不得不提一下TemplateRef和ViewContainerRef TemplateRef 可以理解为dom渲染模板,指令通过TemplateRef的模板来创建dom元素 ViewContainerRef 可以理解为TemplateRef的容器,在调用ViewContainerRef上的createEmb

  • 一篇文章弄懂Python中的可迭代对象、迭代器和生成器

    一篇文章弄懂Python中的可迭代对象、迭代器和生成器

    我们都知道,序列可以迭代.但是,你知道为什么吗? 本文来探讨一下迭代背后的原理. 序列可以迭代的原因:iter 函数.解释器需要迭代对象 x 时,会自动调用 iter(x).内置的 iter 函数有以下作用: (1) 检查对象是否实现了 iter 方法,如果实现了就调用它,获取一个迭代器. (2) 如果没有实现 iter 方法,但是实现了 getitem 方法,而且其参数是从零开始的索引,Python 会创建一个迭代器,尝试按顺序(从索引 0 开始)获取元素. (3) 如果前面两步都失败,Pyt

随机推荐