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 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 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数组函数
2008/08/18 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
php上传大文件设置方法
2016/04/14 PHP
jQuery把表单元素变为json对象
2013/11/06 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
舞蹈教育学专业推荐信
2013/11/27 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
大四毕业生自荐书
2014/07/05 职场文书
酒店端午节活动方案
2014/08/26 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
专职安全员岗位职责
2015/04/11 职场文书
公司开业致辞
2015/07/29 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
Python基础之数据类型知识汇总
2021/05/18 Python
Javascript之datagrid查询详解
2021/09/15 Javascript
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS