ng-repeat指令在迭代對(duì)象時(shí)的去重方法
剛剛遇到一個(gè)問(wèn)題：
在使用AngularJS的ng-repeat指令時(shí)，遇到了數(shù)據(jù)重復(fù)出現(xiàn)的問(wèn)題。
可能有的人會(huì)想到，ng-repeat迭代時(shí)，遇到重復(fù)的數(shù)據(jù)不是會(huì)報(bào)錯(cuò)么？
當(dāng)然了，如果你迭代的是數(shù)組，而且數(shù)據(jù)類(lèi)型時(shí)字符串或者數(shù)字時(shí)，ng-repeat指令就會(huì)自動(dòng)報(bào)錯(cuò)。而且解決辦法也很簡(jiǎn)單， 加個(gè)track by $index就能解決。
而我的問(wèn)題是，在迭代對(duì)象時(shí)，因?yàn)閷?duì)象中有重復(fù)的數(shù)據(jù)，而我需要的是重復(fù)的數(shù)據(jù)只顯示一條，也就是去重。因?yàn)榈氖菍?duì)象，所以ng-repeat并不會(huì)給你報(bào)錯(cuò)，而是會(huì)一條一條的給你遍歷出來(lái)。
百度了很久都沒(méi)有相關(guān)的問(wèn)題，最后只能自己琢磨了。
以上是問(wèn)題。
如何解決呢？
很簡(jiǎn)單，下面是解決辦法，直接上代碼：
<select v-model="option" >
<option value="">--------請(qǐng)選擇--------</option>
<option v-repeat="item in deals" v-hide="deals[$index].accNum == deals[$index+1].accNum">{{item.accNum}}</option>
</select>
搭配使用一個(gè)ng-hide指令，即加一條判斷語(yǔ)句，如果遍歷過(guò)程中的一條數(shù)據(jù)和上一條的數(shù)據(jù)相同，那么就會(huì)觸發(fā)hide事件，自然就去重了。
以上就是解決辦法。希望對(duì)大家有用。
這篇ng-repeat指令在迭代對(duì)象時(shí)的去重方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Angular的結(jié)構(gòu)性指令模塊和樣式，對(duì)此感興趣的同學(xué)，可以參考下。2021-05-05
AngularJS基礎(chǔ) ng-readonly 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-readonly 指令,這里對(duì)ng-readonly指令的資料做了整理，有學(xué)習(xí)AngularJS 指令的同學(xué)可以參考下2016-08-08
在Angular中使用依賴(lài)注入，可以幫助我們實(shí)現(xiàn)松耦合，可以說(shuō)只有在組件中使用依賴(lài)注入才能真正的實(shí)現(xiàn)可重用的組件。2017-06-06
詳解angular筆記路由之a(chǎn)ngular-router
本篇文章主要介紹了詳解angular筆記路由之a(chǎn)ngular-router，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要為大家介紹了Angular16如何獲得路由參數(shù)的實(shí)現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
本篇文章給大家詳細(xì)分析了angularjs中$http異步上傳Excel文件方法，對(duì)此有需要的讀者可以學(xué)習(xí)下。2018-02-02
AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法
今天小編就為大家分享一篇AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Angularjs注入攔截器實(shí)現(xiàn)Loading效果
angularjs作為一個(gè)全ajax的框架，對(duì)于請(qǐng)求，如果頁(yè)面上不做任何操作的話(huà)，在結(jié)果反回來(lái)之前，頁(yè)面是沒(méi)有任何響應(yīng)的，不像普通的HTTP請(qǐng)求，會(huì)有進(jìn)度條之類(lèi)2015-12-12
Angular中使用響應(yīng)式表單的詳細(xì)步驟
Angular提供了兩種處理表單的方式模板驅(qū)動(dòng)表單和響應(yīng)式表單（也稱(chēng)為模型驅(qū)動(dòng)表單）,使用模板驅(qū)動(dòng)表單時(shí),模板指令被用來(lái)構(gòu)建表單的內(nèi)部表示,在本文中,您探討了如何將響應(yīng)式表單應(yīng)用于一個(gè)示例 Angular 應(yīng)用程序2024-02-02
Angular應(yīng)用的多語(yǔ)言設(shè)置問(wèn)題解決示例
這篇文章主要為大家介紹了Angular應(yīng)用的多語(yǔ)言設(shè)置問(wèn)題解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07