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 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
了解一点js的Eval函数
Jul 26 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
js实现全选和全不选功能
Jul 28 Javascript
js实现跳一跳小游戏
Jul 31 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页面消耗内存过大的处理办法
2013/03/18 PHP
php常见的魔术方法详解
2014/12/25 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
详解Scrapy Redis入门实战
2020/11/18 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
大学生心理活动总结
2014/07/04 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
员工工作表扬信
2015/05/05 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python