angular.js using ng-options to only display unique values

Question

angular.js using ng-options to only display unique values

If I have an array

$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'red', shade:'dark'},
{name:'yellow', shade:'light'}

];

Is it possible to use ng-options to build a select element with only unique values in the dropdown, so red will only display once?

angularjs

Answer 1

AngularUI has exactly what you need, the ´unique´ filter (src code).

Example:

ng-options="color in colors | unique:'name'"

Answer 2

You can use uniq/unique filter of angular.filter module.
Usage: collection | unique: 'property' or collection | unique: 'nested.property'

JS:

$scope.colors = [
 {name:'black', shade:'dark'},
 {name:'white', shade:'light'},
 {name:'red', shade:'dark'},
 {name:'red', shade:'dark'},
 {name:'yellow', shade:'light'}
];

HTML:

<select ng-options="color in colors | unique:'name'"></select>

Answer 3

I didn't find that the above replies worked. I did the following:

Implemented my ng-options this way:

<select ng-model="test" ng-options="cand.candidate for cand in candidates  | unique:'candidate'">
   <option value="">Select Candidate</option>
</select>

Add your module to your app:

var app = angular.module('phonecatApp', ['ui.unique']);

Install just Ui Utils Unique, using Bower. Link to instructions.