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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 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实现的轻量级简单爬虫
2015/07/08 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python打开windows应用程序的实例
2019/06/28 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
python实现从wind导入数据
2019/12/03 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
Python安装Bs4的多种方法
2020/11/28 Python
幼儿园儿童节主持词
2014/03/21 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
初中同学会活动方案
2014/08/22 职场文书
实习单位指导教师评语
2014/12/30 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
MySQL分区以及建索引的方法总结
2022/04/13 MySQL