Depedent Dropdown boxes - Part I

In this post I will be demonstrating how easy it is to make a drop-down box data dependent on the selected values of the other drop-down box inside an edit form by using angular directives ng-model and ng-option. 

Lets take the example where we have states and there corresponding cities. Based on what is selected in the state drop-down control, the cities list gets filtered in the cities drop-down.




Available Models:

states =  [ {id: 1, name: 'Karnataka'},
                 {id: 2, name: 'TamilNadu'},
                 {id: 3, name: 'Kerala'}];

cities = [{state: {id: 1, name: 'Karnataka'}, name: 'Bangalore', id: 1},
              {state: {id: 1, name: 'Karnataka'}, name: 'Mangalore'.NET, id: 2},
              {state: {id: 1, name: 'Karnataka'}, name: 'Mysore', id: 3},
              {state: {id: 2, name: 'TamilNadu'}, name: 'Chennai', id: 4},
              {state: {id: 2, name: 'TamilNadu'}, name: 'Madurai', id: 5},
              {state: {id: 3, name: 'Kerala'}, name: 'Calicut', id: 6},
              {state: {id: 3, name: 'Kerala'}, name: 'Cochin', id: 7}];

Now lets build a view to display the dependency between two drop-down controls in angularJS application. Below are the steps you need to follow:

• In the controller javascript file add the below code: 
       myApp.controller('citiesController', ['$scope', 
              function ($scope) {
                 $scope.states =  [{id: 1, name: 'Karnataka'},
                     {id: 2, name: 'TamilNadu'},
                     {id: 3, name: 'Kerala'}];
                 $scope.cities = [{state: {id: 1, name: 'Karnataka'}, name: 'Bangalore', id: 1},
                                           {state: {id: 1, name: 'Karnataka'}, name: 'Mangalore'.NET, id: 2},
                                           {state: {id: 1, name: 'Karnataka'}, name: 'Mysore', id: 3},
                                           {state: {id: 2, name: 'TamilNadu'}, name: 'Chennai', id: 4},
                                           {state: {id: 2, name: 'TamilNadu'}, name: 'Madurai', id: 5},
                                           {state: {id: 3, name: 'Kerala'}, name: 'Calicut', id: 6},
                                           {state: {id: 3, name: 'Kerala'}, name: 'Cochin', id: 7}];     


                $scope.currentCity =      {state: {id: 1, name: 'Karnataka'}, name: 'Bangalore', id: 1};
              }]);




• In the HTML file (partial view) add the following code where you want to see the state and city drop-down boxes to appear. 

          <table>          

             <tr>

                <td>

                    <label>Current State</label>

                </td>

                <td>

                    <select ng-model ="currentCity.state" 

                                 ng-options ="state.name for state in states track by state.id" >

                   </select>                   

                </td>

                <td>

                    <label >Current City</label>

                </td>               

                <td>

                     <select ng-model ="currentCity"                                                                

                                ng-options="city.name for city in (cities | filter:{state: {id: currentCity.state.id}})

                                 track by city.id">

                     </select>

                </td>

             </tr>

          </table>          

The above code generates following outputs based on the value selected from the current state drop-down box.