CODEWITHSUNDEEP
htmlangularjsangularjs-ng-repeathtml-select
AnthW
AnthW

Reputation: 543

AngularJS - repeating select options only once for each different value

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:

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

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}"

Upvotes: 0

Views: 1097

Answers (2)

Santiago Rebella
Santiago Rebella

Reputation: 2449

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

Upvotes: 0

JC Ford
JC Ford

Reputation: 7066

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

Upvotes: 1

Related Questions