CODEWITHSUNDEEP
angularjsui-select
Hekmat Sarwarzade
Hekmat Sarwarzade

Reputation: 143

Multi select based on another multi select

I need to filter city based on the country in these multi-selects. I used ui-select for multi-selects, Thanks to @tanmay.

Please take a look at this fiddle.

Fiddle

Upvotes: 1

Views: 480

Answers (1)

Nishant123
Nishant123

Reputation: 1966

You can add a function on ng-change that will return all the cities for the selected country

 $scope.getCityList=function(){

      var sampletemp = []; //temp array to hold filtered values
      $scope.selected.country.forEach(function(country) {
      //bjectFromArrayFilter --> A filter function that will do the filtering
      var temp =    objectFromArrayFilter($scope.samples,'country',country);
      sampletemp = sampletemp.concat(temp);
      //Filter duplicate city names
      $scope.uniquecity = $filter('unique')(sampletemp, 'city');
      //Reset all the already selected values
      $scope.selected.city= [];

      $scope.city = $scope.uniquecity.map(function(item) {
      return item.city
        })
    }

The filtering function.

You can also use this function to perform custom filtering. Just pass the array of objects, filtering key and value to match 

var objectFromArrayFilter=function(arrayOptions, key, value) {
    var filterResult = arrayOptions.filter(function(val) {
            return val[key] === value;
    });
    return filterResult;
};

FULL EXAMPLE

Similar function can be made for filtering on other $scope.samples keys

Upvotes: 1

Related Questions