angular.js使用ng-options仅显示唯一值

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元素,因此红色只显示一次？

Answer 1

AngularUI正是你需要的,'unique'过滤器(src代码).

例:

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

Answer 2

您可以使用angular.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>