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 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
JS功能代码集锦
May 04 Javascript
js与applet相互调用的方法
Jun 22 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
JavaScript实现图片合成下载的示例
Nov 19 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实现格式化文件数据大小显示的方法
2015/01/03 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
vue 组件简介
2020/07/31 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
python处理html转义字符的方法详解
2016/07/01 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Python3 log10()函数简单用法
2019/02/19 Python
python面向对象法实现图书管理系统
2019/04/19 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
Python的几种主动结束程序方式
2019/11/22 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python 创建守护进程的示例
2020/09/29 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
什么是类的返射机制
2016/02/06 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
学校2014重阳节活动策划方案
2014/09/16 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
公司聚餐通知
2015/04/22 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android