19

如果我有一个数组

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

];

是否可以使用 ng-options 在下拉列表中构建一个只有唯一值的选择元素,所以红色只会显示一次?

4

4 回答 4

36

AngularUI正是您所需要的,“独特”过滤器(src 代码)。

例子:

ng-options="color in colors | unique:'name'"
于 2013-02-07T10:51:46.173 回答
12

您可以使用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>
于 2014-08-04T08:39:08.100 回答
1

我没有发现上面的回复有效。我做了以下事情:

以这种方式实现了我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 仅安装 Ui Utils Unique。链接到说明。

于 2015-02-11T20:02:04.583 回答
-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}}
于 2016-05-29T18:16:32.463 回答