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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
javascript 变量作用域 代码分析
Jun 26 Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 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脚本[带参数]的方法
2010/01/22 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
javascript基础知识
2016/06/07 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
python实现简单http服务器功能
2018/09/17 Python
python中类的属性和方法介绍
2018/11/27 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
wxPython实现分隔窗口
2019/11/19 Python
Pycharm安装python库的方法
2020/11/24 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
师范毕业生自荐信
2013/10/17 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
投标承诺书怎么写
2014/05/24 职场文书
敬老院标语
2014/06/27 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
零基础学java之循环语句的使用
2022/04/10 Java/Android