Unique ng-options in Angular

Question

I am trying to get unique results in angular ng-options on a select box.

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

The above code will get me all the nationality's however it show's duplicates.

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

When I try this code angular throw's errors and shows me nothing in the select box.

Controller

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;
});
});

Thanks.

seems like similar question http://stackoverflow.com/questions/14748440/angular-js-using-ng-options-to-only-display-unique-values — Igor Bukin, Apr 23 '16 at 10:04
There's no such thing called `unique` in angular if you're not getting it from a 3rd party library. Why don't you filter out duplicates in your controller? — mostruash, Apr 23 '16 at 10:06

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

I think this code will work for you :

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

===EDIT===

Based on this post , you need the third-party library to provide you the filter service, include this library in your html file.

==EDIT 2=== In order to demo how this works I make a working fiddle. In this fiddle I use anuglar-ui library to replace the module and it works as expected.

In case that you only need 'ui.filters' module but not the other parts(import only necessary modules is the best practice), here is another fiddle link that only imports the unique function from the ui-filter module.

edited May 23 '17 at 11:52

Community

1
1

answered Apr 23 '16 at 10:04

David Tao

513
5
12

This gives me an error. ```angular.js:12416Error: [ngOptions:iexp]``` – GarethFrazer Apr 23 '16 at 10:06
I have included the third party library you said about. I'm still getting the same error. – GarethFrazer Apr 23 '16 at 10:19
1

@GarethFrazer please try the fiddle link I posted in the answer, I think it will work for you – David Tao Apr 23 '16 at 10:37
@david_Tao When I add ```['ui.filters']``` it breaks everything – GarethFrazer Apr 23 '16 at 12:47
1

sorry I forget to mention about one thing there: if you just want to load that single 'filter' function, you need to modify the declaration of 3rd party code from `angular.module('ui.filters').filter('unique', function () {...});` to `angular.module('ui.filters', []).filter('unique', function () {...});` because the former one already assume you have loaded module the 'ui.filters' but actually you don't. So add an empty '[]' as the second parameter to initialize the 'ui.filter' module. – David Tao Apr 23 '16 at 12:59
It is working now. Thank you for you're time and help! – GarethFrazer Apr 23 '16 at 13:23

Unique ng-options in Angular

1 Answers1