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


Posted in Javascript onOctober 02, 2018

刚刚遇到一个问题:

在使用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指令在迭代对象时的去重方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
JavaScript 函数的执行过程
May 09 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
浅谈开发eslint规则
Oct 01 #Javascript
Angular ElementRef简介及其使用
Oct 01 #Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 #Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 #Javascript
vue项目持久化存储数据的实现代码
Oct 01 #Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 #Javascript
在create-react-app中使用sass的方法示例
Oct 01 #Javascript
You might like
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
php 基础函数
2017/02/10 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Python中的asyncio代码详解
2019/06/10 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
Python笔记之观察者模式
2019/11/20 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
Python中常见的数制转换有哪些
2020/05/27 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
财务内勤岗位职责
2014/04/17 职场文书
学生会主席演讲稿
2014/04/25 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
运动会方队口号
2014/06/07 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书