CODEWITHSUNDEEP
javascripthtmlangularjsfilterng-options
Tikaa
Tikaa

Reputation: 49

AngularJS filter unique removing duplicates in ng-options

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

Upvotes: 0

Views: 11040

Answers (2)

scniro
scniro

Reputation: 16989

unique is not included with AngularJS - this filter is bundled with older versions on AngularUI, and also appears to be commonly 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

Upvotes: 0

ExpectoPatronum
ExpectoPatronum

Reputation: 507

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 common 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.com/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>

Upvotes: 2

Related Questions