AngularJS - repeating select options only once for each different value

Question

I have a HTML select box at the top of a page, the page shows a list of documents. The select box will have a list of available file extensions to filter the list of documents by. At the moment, I have:

<select data-ng-model="filterType">
    <option data-ng-repeat="item in docItems" value="{{item.extension}}">{{item.extension}}</option>
</select>

What the above code does is give me a list, for example:

xls
xls
xls
doc
xls
pdf
pdf

But what I am wanting is to only show something like:

xls
pdf
doc

So, it only shows one of each available values.

It's also important that the extension stays as the options value, as this is what I am using on my filter, like so:

 data-ng-repeat="docItem in docItems | filter:{extension: filterType}"

score 1 · Answer 1 · answered Nov 21 '14 at 13:34

1

You need to loop through the file name array and build a new array of just extensions. Do this in your controller.

answered Nov 21 '14 at 13:34

JC Ford

6,946
3
25
34

"Do this in your controller" especially means: Don't create a filter to do that, because filters must not create a new `Array` on each run. – hon2a Nov 21 '14 at 13:36

score 0 · Answer 2 · edited May 23 '17 at 10:26

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>

taken from How to make ng-repeat filter out duplicate results

AngularJS - repeating select options only once for each different value

2 Answers2