Angular filter out duplicates in multiple selects on ng-repeat

Question

I have a select box and an add button that adds another select box to the form by adding an empty object to an object ng-repeat is using. How can I dynamically assign an object that each select box can use that excludes any items that the other select boxes are using?

For example, if I have a select box with 'Branch' selected and then I add another select box, how can I exclude 'Branch' from that select box as well as all future select boxes? So if I have 4 select boxes all selecting something and I go to make a 5th select box, I only want to be able to select the 1 item that hasn't been selected yet.

I tried using a filter I saw in this post but that didn't really help me. I've tried playing around with other filters but I just can't seem to get this right.

I have the following HTML:

With the following JS:

var app = angular.module('app', [
    'ngAnimate',
    'ngTouch',
    'ngSanitize',
    'ui.bootstrap',
    'ui.bootstrap.modal',
    'angular-loading-bar'
])

app.filter('exclude', function () {
    return function (items, exclude) {
        return items.filter(function (item) {
            return exclude.indexOf(item.ID) == -1;
        })
    }
})

app.controller('appController', function($scope, $http) {   
    $scope.searchOptions = [
        {ID: 1, Name: 'Branch', Show: true},
        {ID: 2, Name: 'BranchArea', Show: true},
        {ID: 3, Name: 'EmployeeType', Show: true},
        {ID: 4, Name: 'LastUpdateDateStart', Show: true},
        {ID: 5, Name: 'LastUpdateDateEnd', Show: true}      
    ]

    $scope.searchObject = [{}]

    $scope.excludedOptions = []

    $scope.modifyCriteria = function (index, last) {
        if (index < $scope.searchOptions.length - 1 && last == true) {
            $scope.searchObject.push({})
        } else {
            $scope.searchObject.splice(index, 1)
        }
    }

    $scope.searchValid = function () {
        for (var i = 0; i < $scope.searchObject.length; i++) {
            if (!$scope.searchObject[i].searchOption || !$scope.searchObject[i].searchText) {
                return false
            }
        }

        return true
    }

    $scope.clearSearchOption = function (searchForm) {
        delete searchForm.searchOption
    }

    function containsId(id) {
        for (var i = 0; i < $scope.searchObject.length; i++) {
            if ($scope.searchObject[i].searchOption.ID == id) {
                return true
            }
        }

        return false
    }
})

Vivek Venkatachari · Accepted Answer

So looks like for this scenario to work across multiple select box, it would be beneficial to have a component/directive of our own select box which would behave according to our requirement.

So first step we need to create a directive/component to take is a list of option and display in select box. This directive will also handle the filter to eliminate those options which are selected from precious order

here is the plunker link which will show this all together: http://plnkr.co/edit/Zxr17TQXwHpiQUzKAc8f?p=preview

directive:

app.directive('mySelectBox', function($filter) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      optionList:'=',
      allOptions: '=',
      index: '='
    },
    templateUrl:'selectTemplate.html',
    link: function(scope) {
      scope.onChange = function () {
        for(var i=0;i 0) {
          var j = scope.index;
          for(var l=j;l>0;l=l-1) {
            var previousVal = $filter('filter')(scope.allOptions[j-1].optionList, {ID:val.ID}, true);
            if(!previousVal[0].Show) {
              return false;
            } else {
              j=j-1;
            }
          }
        }
        return true;
      }
    }
  }
});

Now we will have the controller which will hold this and logic to clone and add the select box on click of button

app.controller('MainCtrl', function($scope) {
  $scope.name = 'Boxes';
  $scope.options=[];
  $scope.optionList = 
      [ {ID: 1, Name: 'Branch', Show: true},
        {ID: 2, Name: 'BranchArea', Show: true},
        {ID: 3, Name: 'EmployeeType', Show: true},
        {ID: 4, Name: 'LastUpdateDateStart', Show: true},
        {ID: 5, Name: 'LastUpdateDateEnd', Show: true}  ];


  $scope.addCount = function() {
    $scope.options.push({optionList:angular.copy($scope.optionList)});
  }

});

Now the templates

directive:


      Select Box {{index+1}}:  
      {{person.Name}}

index html which holds this directive call




  
    
    Custom Plunker
    
    
  

  
    Hello {{name}}
     Click here to add a select box

Angular filter out duplicates in multiple selects on ng-repeat

Answers (1)

Related Questions