Angular.js, используя ng-options, чтобы отображать только уникальные значения

Если у меня есть массив

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

];

Можно ли использовать ng-options для создания элемента select с уникальными значениями в раскрывающемся списке, поэтому красный будет отображаться только один раз?

Ответ 1

У AngularUI есть именно то, что вам нужно, фильтр'unique '(src code).

Пример:

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

Ответ 2

Вы можете использовать uniq/уникальный фильтр angular.filter.
Использование collection | unique: 'property' или 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>

Ответ 3

Я не нашел, что эти ответы были сработаны. Я сделал следующее:

Реализовано мое ng-options следующим образом:

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

Добавьте свой модуль в свое приложение:

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

Установите только Ui Utils Unique, используя Bower. Ссылка на инструкции.

Ответ 4

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