How to avoid duplicate String in a select?

Question

if I have a select element like this:

<select
        ng-model="dispatchOutput"
        ng-options="item as (item.output | uppercase) for item in searchFilterDispatcher.params"
        class="form-control" 
        id="dispatchOutput" >

that populate the select with elements from a list of object that have the possibility to have multiple Strins with the same values, how can I avoid to show duplicate entries?

Possible duplicate of [How to make ng-repeat filter out duplicate results](https://stackoverflow.com/questions/15914658/how-to-make-ng-repeat-filter-out-duplicate-results) — Prerak Sola, Jul 18 '17 at 07:41

score 1 · Answer 1 · answered Jul 18 '17 at 07:48

You should create a custom filter to filter out the unique values and apply that to ng-options:

app.filter('unique', function() {
    return function (arr, field) {
        return _.uniq(arr, function(a) { return a[field]; }); // (Assuming that you are using lodash in your app) if not use you custom logic here
    };
});

Later in your template you could use this filter.

But I would suggest you to use https://github.com/a8m/angular-filter#unique

This has lot of filters already available for use and can serve your above purpose.

score 1 · Accepted Answer · answered Jul 18 '17 at 07:55

Use unique filter Unique-filter

angular.module("app",['angular.filter'])
  .controller("ctrl",['$scope',function($scope){
  $scope.searchFilterDispatcher={};
    $scope.searchFilterDispatcher.params = [
      {output:'abc', value:1},
      {output:'abc', value:1},
      {output:'xyz',  value:2}
    ]    
 
  }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>
<html>
<body ng-app="app" ng-controller="ctrl">
   <select
    ng-model="dispatchOutput"
    ng-options="item as (item.output | uppercase) for item in searchFilterDispatcher.params | unique : 'output'"
    class="form-control" 
    id="dispatchOutput" >
</select>
</body>
<html>

How to avoid duplicate String in a select?

2 Answers2