Angular中的唯一ng选项

时间:2016-04-23 09:59:37

标签: javascript angularjs ng-options

我试图在选择框上获得角度ng选项的独特结果。

<select ng-model="nationality" id="nationality" 
        ng-options="player as player.nationality for player in players></select>

以上代码将获得所有国籍,但它显示重复。

<select ng-model="nationality" id="nationality" 
        ng-options="player as players | unique: 'player.nationality'"></select>

当我尝试这个代码角度抛出错误时,在选择框中没有显示任何内容。

控制器

var app = angular.module('premierLeagueDB', []);
app.controller('mainCtrl', function($scope, $http) {
$http({
    method : "GET",
    url : "api.php/clubs",
}).then(function mySucces(response) {
    $scope.clubs = response.data.club;
}, function myError(response) {
    $scope.showError = response.statusText;
});
});

感谢。

1 个答案:

答案 0 :(得分:2)

我认为此代码适合您:

<select ng-model="nationality" id="nationality" ng-options="player as players | unique: 'nationality' "></select>

=== EDIT ===

根据此post,您需要第三方库为您提供filter服务,在您的html文件中加入this library

==编辑2 === 为了演示这是如何工作的,我制作了working fiddle。在这个小提琴中,我使用anuglar-ui库替换模块,它按预期工作。

如果您只需要'ui.filters'模块但不需要其他部分(仅导入必要的模块是最佳做法),这里只有another fiddle link只导入unique函数ui-filter模块。