ng-repeat指令在迭代对象时的去重方法
更新时间：2018年10月02日 13:42:42 作者：MPFLY
今天小编就为大家分享一篇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指令在迭代对象时的去重方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Angular的结构性指令模块和样式，对此感兴趣的同学，可以参考下。2021-05-05
AngularJS基础 ng-readonly 指令简单示例
本文主要介绍AngularJS ng-readonly 指令,这里对ng-readonly指令的资料做了整理，有学习AngularJS 指令的同学可以参考下2016-08-08
在Angular中使用依赖注入，可以帮助我们实现松耦合，可以说只有在组件中使用依赖注入才能真正的实现可重用的组件。2017-06-06
本篇文章主要介绍了详解angular笔记路由之angular-router，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家介绍了Angular16如何获得路由参数的实现方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
本篇文章给大家详细分析了angularjs中$http异步上传Excel文件方法，对此有需要的读者可以学习下。2018-02-02
AngularJs1.x自定义指令独立作用域的函数传入参数方法
今天小编就为大家分享一篇AngularJs1.x自定义指令独立作用域的函数传入参数方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
angularjs作为一个全ajax的框架，对于请求，如果页面上不做任何操作的话，在结果反回来之前，页面是没有任何响应的，不像普通的HTTP请求，会有进度条之类2015-12-12
Angular提供了两种处理表单的方式模板驱动表单和响应式表单（也称为模型驱动表单）,使用模板驱动表单时,模板指令被用来构建表单的内部表示,在本文中,您探讨了如何将响应式表单应用于一个示例 Angular 应用程序2024-02-02
这篇文章主要为大家介绍了Angular应用的多语言设置问题解决示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
最新评论