CODEWITHSUNDEEP
javascriptangularjs
Jordan.J.D
Jordan.J.D

Reputation: 8113

ng repeat list dropdown to filter another list dropdown

I have two drop down lists like the following:

HTML

<div class="col-md-3">
    <select class="form-control"  ng-model="select1">
        <option value="" selected disabled>Select First</option>
        <option  ng-repeat="item in items" value="{{item.name}}">{{item.name}}</option>
    </select>
</div>
<div class="col-md-2">
    <select class="form-control"  ng-model="select2">
        <option value="" selected disabled>Select Second</option>
        <option ng-repeat="item in items|filter:itemFilter" value="{{item.stuff}}">{{item.stuff}}</option>
    </select>
</div>

my list of items looks like:

[
  {name:"foo1", stuff:["bar1","bar2","bar3"]},
  {name:"foo2", stuff:["bar4","bar5","bar6"]},
  {name:"foo3", stuff:["bar7","bar8","bar9"]}
]

Controller

 $scope.itemFilter = function (item) {
         return item.name == $scope.select1;
};

Objective

When I select foo1 from the first dropdown, the second dropdown should have 3 options bar1,bar2,bar3

Current

When I select foo1 from the first dropdown, the second dropdown contains one option ["bar1","bar2","bar3"]

Upvotes: 1

Views: 1525

Answers (1)

fahadash
fahadash

Reputation: 3281

One way is to use a method to filter, and call that filter method on ngChange of the first drop-down.

<select class="form-control"  ng-model="select1" ng-change="filterItems()">

Here is the definition of the filter method

$scope.filterItems = function() {
  var index = 0;
  for (var i = 0; i < $scope.items.length; i++) {
    if ($scope.items[i].name == $scope.select1) {
      index = i;
      break;
    }
  }
  $scope.filteredItems = $scope.items[index].stuff;
};

And bind your second drop-down to the filtered list

<select class="form-control"  ng-model="select2">
    <option value="" selected disabled>Select Second</option>
    <option ng-repeat="item in filteredItems">{{item}}</option>
</select>

Here is a fully working Plunkr

Upvotes: 3

Related Questions