How to make ng-repeat filter out duplicate results

angularjs angularjs-ng-repeat
JVG picture JVG · Apr 10, 2013 · Viewed 217.2k times · Source

I'm running a simple ng-repeat over a JSON file and want to get category names. There are about 100 objects, each belonging to a category - but there are only about 6 categories.

My current code is this:

<select ng-model="orderProp" >
  <option ng-repeat="place in places" value="{{place.category}}">{{place.category}}</option>
</select>

The output is 100 different options, mostly duplicates. How do I use Angular to check whether a {{place.category}} already exists, and not create an option if it's already there?

edit: In my javascript, $scope.places = JSON data, just to clarify

Answer

jpmorin picture jpmorin · Apr 11, 2013

You could use the unique filter from AngularUI (source code available here: AngularUI unique filter) and use it directly in the ng-options (or ng-repeat).

<select ng-model="orderProp" ng-options="place.category for place in places | unique:'category'">
    <option value="0">Default</option>
    // unique options from the categories
</select>

Related questions

AngularJS For Loop with Numbers & Ranges

Angular does provide some support for a for loop using numbers within its HTML directives: <div data-ng-repeat="i in [1,2,3,4,5]"> do something </div> But if your scope variable includes a range that has a dynamic number then …

Read More
How to iterate over the keys and values with ng-repeat in AngularJS?

In my controller, I have data like: $scope.object = data Now this data is the dictionary with keys and values from json. I can access the attribute with object.name in the template. Is there any way that I can …

Read More
Way to ng-repeat defined number of times instead of repeating over array?

Is there a way to ng-repeat a defined number of times instead of always having to iterate over an array? For example, below I want the list item to show up 5 times assuming $scope.number equal to 5 in addition incrementing …

Read More