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?
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>
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.
src="js/vendor/bower_components/angular-filter/dist/angular-filter.js">
angular.module('app', ['angular.filter'])
ng-repeat="color in colors | unique:'name'">{{color.name}}
