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 parsefloat parseint 转换函数
Jan 21 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
JS求解两数之和算法详解
Apr 28 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
论坛头像随机变换代码
2006/10/09 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
ThinkPHP分页实例
2014/10/15 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
python开发之list操作实例分析
2016/02/22 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
企业统计员岗位职责
2013/12/13 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
代理协议书范本
2014/04/22 职场文书
党支部对转正的意见
2015/06/02 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python