angularjs - ng-optionsを使用して一意の値のみを表示するangular.js

Question

配列がある場合

$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回だけ表示されるようにすることはできますか？

Answer 1

AngularUIには、まさに必要なもの、「一意の」フィルター（srcコード）があります。

例：

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

Answer 2

angle.filterモジュールのuniq/uniqueフィルターを使用できます。
使用法： 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>

Answer 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']);

Bowerを使用して、UiUtilsUniqueだけをインストールします。手順へのリンク。

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