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 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
详解React之key的使用和实践
Sep 29 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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
如何使用PHP获取网络上文件
2006/10/09 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
7个JS基础知识总结
2014/03/05 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python中文件的读取和写入操作
2018/04/27 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Django实现跨域请求过程详解
2019/07/25 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
SQL数据库笔试题
2016/03/08 面试题
中式面点餐厅创业计划书
2014/01/29 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
八一建军节慰问信
2015/02/14 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers