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 Form.elements[i]的使用实例
Nov 13 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
js实现微博发布小功能
Jan 12 Javascript
Javascript继承机制详解
May 30 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
input的focus方法使用
2010/03/13 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
js创建数组的简单方法
2016/07/27 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现的防DDoS脚本
2011/02/08 Python
python编写简单爬虫资料汇总
2016/03/22 Python
基于python指定包的安装路径方法
2018/10/27 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
学生自我鉴定范文
2013/10/04 职场文书
策划总监岗位职责
2014/02/16 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
经理岗位职责范本
2015/04/15 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
php实例化对象的实例方法
2021/11/17 PHP
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库