ng-table Depedent DropDown Boxes Part II

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 in each row of the table, by using angular directives ng-model, ng-option and ng-change. 







The first three images shows how skills are dependent on skill types and last image shows the employee skill data in a grid/table.

To achieve this lets assume that we have skill types, skills and employee data as below:

skillTypes =  [{id: 1, name: 'Technical'},
                       {id: 2, name: 'Domain'},
                       {id: 3, name: 'Personal'}];

skills = [{type: {id: 1, name: 'Technical'}, name: 'Java', id: 1},
              {type: {id: 1, name: 'Technical'}, name: '.NET', id: 2},
              {type: {id: 1, name: 'Technical'}, name: 'AngularJS', id: 3},
              {type: {id: 1, name: 'Domain'}, name: 'LifeScience,' id: 4},
              {type: {id: 2, name: 'Domain'}, name: 'Media', id: 5},
              {type: {id: 3, name: 'Personal'}, name: 'Communication', id: 6}];


employee = {id: 1, firstName: 'Pratibha', lastName: 'Hyanki', employeeId: 'xxx', 
                      skills: [ { skill: {type: {id: 1, name: 'Technical'}, name: '.NET', id: 2} id:1},
                                   {skill: {type: {id: 2, name: 'Domain'}, name: 'Media', id: 5} id:2},
                                   {skill: {type: {id: 3, name: 'Personal'}, name: 'Communication', id: 6} id:3},
                                   {skill: {type: {id: 1, name: 'Technical'}, name: 'AngularJS', id: 6} id: 4}  
                                ]};

Now let's show this data in the screen with AngularJS and HTML.

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:

• Add ngTable module to where the app module is being declared.

                 var myApp = angular.module("myApp", ["ngTable"])

• In the controller javascript file add the below code: 
       myApp.controller('editEmployeeSkillController', ['ngTableParams', '$scope', 
              function (ngTableParams, $scope) {
                 $scope.skillTypes =  [{id: 1, name: 'Technical'},
                                                    {id: 2, name: 'Domain'},
                                                    {id: 3, name: 'Personal'}];           

                                    
                var skills = [{type: {id: 1, name: 'Technical'}, name: 'Java', id: 1},
                            {type: {id: 1, name: 'Technical'}, name: '.NET', id: 2},
                            {type: {id: 1, name: 'Technical'}, name: 'AngularJS', id: 3},
                            {type: {id: 1, name: 'Domain'}, name: 'LifeScience', id: 4},
                            {type: {id: 2, name: 'Domain'}, name: 'Media', id: 5},
                            {type: {id: 3, name: 'Personal'}, name: 'Communication', id: 6}];


                //Needed to create dependency between skill type and skill drop-down boxes

      $scope.originalSkills = angular.copy(skills);
                $scope.availableSkills = angular.copy(skills);


                var employee = {id: 1, firstName: 'Pratibha', lastName: 'Hyanki', employeeId:'xxx',
                                 skills: [ {skill: {type: {id: 1, name: 'Technical'}, name: '.NET', id: 2} id:1},
                                              {skill: {type: {id: 2, name: 'Domain'}, name: 'Media', id: 5} id:2},
                                              {skill: {type: {id: 3, name: 'Personal'}, name: 'Communication', id: 6} id:3},
                                              {skill: {type: {id: 1, name: 'Technical'}, name: 'AngularJS', id: 3}. id:4}  
                                         ]}; 
  
               $scope.employeeSkills= new ngTableParams({}, {
                       dataset: employee.skills,
                       counts: []



               });


    $scope.skillTypeChanged = function (skill, index) {
        $scope.availableSkills = angular.copy($scope.originalSkills );
        for (var i = 0; i < $scope.availableSkills.length; i++) {
               if (skill.type.id == $scope.availableSkills[i].type.id) {
                   $scope.employeeSkills[index].skill = angular.copy($scope.availableSkills[i]);
                        break;
               }
         }              
         $scope.availableSkills = angular.copy($scope.originalSkills );
    };      
           }]);




• In the HTML file (partial view) add the following code where you want your employee skill table to appear. We have used Text boxes, drop-down boxes and the checkbox controls in the view to make the screen editable.  

            <div>

               <table ng-table="employeeSkills">

                  <tr ng-repeat="skill in $data">

                    <td data-title="'#'">{{$index + 1}}</td>

                    <td data-title="'Skill Type'" >

          <select name="skillType_{{$index +1}}" id="skillType_{{$index +1}}" ng-model="skill.type" 
                                    ng-options="type.name for type in skillTypes track by type.id" 
                                    ng-change="skillTypeChanged(skill.skill, $index)"></select>

                     </td>

                     <td data-title="'Skill Name'" >

                   <select name="skillName_{{$index +1}}" id="skillName_{{$index +1}}" class="span3" ng-model="skill.skill"                                                                

                                ng-options="skillName.skillName for skillName in (availableSkills | filter:{type: {id: skill.skill.type.id}})

                                 track by skillName.id"></select>

                     </td>   

                </tr>

             </table>

          </div>