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 с уникальными значениями в раскрывающемся списке, поэтому красный будет отображаться только один раз?

19

4 ответы

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

Пример:

ng-options="color in colors | unique:'name'"
34
добавлено
Или создайте свой собственный, как в этом примере: stackoverflow.com/a/18382680/39722
добавлено автор Bernhard Hofmann, источник
Теперь можно найти здесь: angular-ui.github.io/ui-utils
добавлено автор Nick, источник

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:


12
добавлено
+1 для ссылочной вложенности.property.
добавлено автор Aidanapword, источник
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}}
4
добавлено

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

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


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

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

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

1
добавлено
Angular — русскоговорящее сообщество
Angular — русскоговорящее сообщество
3 960 участник(ов)

Общаемся на темы Angular 4+, его экосистемы, TypeScript, NativeScript и т.д. По вопросам SSR, Angular Universal @angular_universal_ru См. также: @typescript_ru, @react_js, @nodejs_ru, @js_ru Вакансии и поиск работы: @javascript_jobs

Angular.js (1.x) — русскоговорящее сообщество
Angular.js (1.x) — русскоговорящее сообщество
704 участник(ов)

Общаемся и обсуждаем темы, посвященные Angular 1.x и экосистеме.

AngularJS, Javascript
AngularJS, Javascript
370 участник(ов)

Angularjs russian chat