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 相关文章推荐
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
bootstrap table小案例
Oct 21 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
jquery实现广告上下滚动效果
Mar 04 jQuery
浅谈开发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数组编码转换示例详解
2014/03/11 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python操作Word批量生成文章的方法
2015/07/28 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
庆元旦广播稿
2014/02/10 职场文书
班长竞选演讲稿
2014/04/24 职场文书
事业单位考核材料
2014/05/21 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
家庭经济困难证明
2015/06/23 职场文书
工作感言一句话
2015/08/01 职场文书
初中团委工作总结
2015/08/13 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python