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 相关文章推荐
JS简单实现元素复制示例附图
Nov 19 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 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学习笔记 数组遍历实现代码
2011/06/09 PHP
php 字符串替换的方法
2012/01/10 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python的多态性实例分析
2015/07/07 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
致长跑运动员广播稿
2014/01/31 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
英文感谢信范文
2015/01/21 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
Python字典的基础操作
2021/11/01 Python
JavaScript流程控制(分支)
2021/12/06 Javascript
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js