Angular中独特的ng选项

Unique ng-options in Angular

本文关键字：ng 选项 Angular      更新时间：2023-09-26

我正在尝试在选择框上的角度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;
});
});

谢谢。

我认为这段代码对你有用：

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

===编辑===

基于这篇文章，您需要第三方库为您提供filter服务，请将此库包含在您的html文件中。

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

如果您只需要"ui.filters"模块而不需要其他部分（仅导入必要的模块是最佳实践），这是另一个仅从ui-filter模块导入unique函数的小提琴链接。

相关文章：