SoFunction
Updated on 2025-04-11

Deduplication method of ng-repeat directive when iterating objects

I just encountered a problem:

When using AngularJS's ng-repeat directive, I encountered the problem of repetition of data.

Some people may think that when ng-repeat iteration, will you report an error when encountering duplicate data?

Of course, if you iterate over an array and when you are a string or a number in the data type, the ng-repeat instruction will automatically report an error. And the solution is also very simple. Adding a track by $index can solve it.

My problem is that when iterating over an object, because there is duplicate data in the object, what I need is that only one of the duplicate data is displayed, that is, deduplication. Because iterates over objects, ng-repeat will not report an error to you, but will traverse it one by one for you.

I have had no related problems for a long time, so I can only think about it myself.

The above are the questions.

How to solve it?

It's very simple. Here is the solution, just upload the code:

<select v-model="option" >
   <option value="">--------Please select--------</option>
   <option v-repeat="item in deals" v-hide="deals[$index].accNum == deals[$index+1].accNum">{{}}</option>
</select>

Use an ng-hide instruction, that is, add a judgment statement. If one data during the traversal process is the same as the data of the previous one, then the hide event will be triggered, and it will naturally be re-heavy.

The above is the solution. Hope it will be useful to everyone.

The method of deduplication of this ng-repeat instruction when iterating objects is all the content I share with you. I hope it can give you a reference and I hope you can support me more.