i have an array:

$scope.arr1 = [option1, option2, option3, option1, option3]

I am using it to fill select options:

<select class="form-control" ng-model="arr1"
     ng-options="option for option in arr1">
     <option value="" disabled>Please select an option</option>
</select>

the options are populated but i want to remove duplicates from them. i have tried:

ng-options="option for option in arr1 | unique: 'option'"

but it gives empty results

i have an array:

$scope.arr1 = [option1, option2, option3, option1, option3]

I am using it to fill select options:

<select class="form-control" ng-model="arr1"
     ng-options="option for option in arr1">
     <option value="" disabled>Please select an option</option>
</select>

the options are populated but i want to remove duplicates from them. i have tried:

ng-options="option for option in arr1 | unique: 'option'"

but it gives empty results

• javascript
• html
• angularjs
• filter
• ng-options

2 Answers 2

Angular does not provide any out of the box filter to achieve what you need.

You tried using ng-options="option for option in arr1 | unique: 'option'", but in angular there is no filter called unique.

You might want to look at the available filters in angular here.

To get the result you want, you will want to create your custom filter to do that. I have created a snippet below which will filter mon values. This should work for you.

var app = angular.module("myapp", []);
app.controller("testCntrl", function($scope){
  $scope.arr1 = ['option1','option2','option3','option1','option3'];
  
})
.filter("removeDups", function(){
  return function(data) {
    if(angular.isArray(data)) {
      var result = [];
      var key = {};
      for(var i=0; i<data.length; i++) {
        var val = data[i];
        if(angular.isUndefined(key[val])) {
          key[val] = val;
          result.push(val);
        }
      }
      if(result.length > 0) {
        return result;
      }
    }
    return data;
  }
})

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="testCntrl">
<select class="form-control" ng-model="arr"
     ng-options="option for option in arr1 | removeDups">
     <option value="" disabled>Please select an option</option>
</select>
    </div>
  </div>

unique is not included with AngularJS - this filter is bundled with older versions on AngularUI, and also appears to be monly available at a8m/angular-filter. You can retrofit it within your app, roll your own, or include a providing module. Observe the following...

ng-options="option for option in arr1 | unique"

// -- AngularUI implementation
.filter('unique', function () {

  return function (items, filterOn) {

    if (filterOn === false) {
      return items;
    }

    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
      var hashCheck = {}, newItems = [];

      var extractValueToCompare = function (item) {
        if (angular.isObject(item) && angular.isString(filterOn)) {
          return item[filterOn];
        } else {
          return item;
        }
      };

      angular.forEach(items, function (item) {
        var valueToCheck, isDuplicate = false;

        for (var i = 0; i < newItems.length; i++) {
          if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
            isDuplicate = true;
            break;
          }
        }
        if (!isDuplicate) {
          newItems.push(item);
        }

      });
      items = newItems;
    }
    return items;
  };
});

JSFiddle Link - working demo