Post
Ask Question

Filtering and Sorting HTML Table Data With AngularJS and Cascading Dropdown

In my last article “Introduction to AngularJS”, we learned the basics of AngularJS. Now I want to do an exercise on AngularJS. In this I am trying to build an application that has table population data from JSON. There should be three cascading dropdowns to filter the data in the table. The user should also be able to sort the table.



controller.js

  1. angular.module('tableApp', [])  
  2. .controller('tableCtrl', ['$scope', '$http', '$timeout',function($scope, $http)   
  3. {                 
  4.      $http.get('tableData/practionerData.json').success(function(data)  
  5.      {  
  6.          $scope.practionerData = data;                         
  7.      }  
  8.      );  
  9.      $http.get('tableData/practionerType.json').success(function(practionerdata)  
  10.      {  
  11.           $scope.practionerType = practionerdata;       
  12.      }            
  13.      ); 
  14.      $http.get('tableData/practionersByType.json').success(function(practionersByType)  
  15.      {  
  16.            $scope.practionersByType = practionersByType;        
  17.      }            
  18.      ); 
  19.      $http.get('tableData/OrganizationByPractioners.json').success(function(OrganizationByPractioners)  
  20.      {  
  21.            $scope.OrganizationByPractioners = OrganizationByPractioners;                 
  22.      }   
  23.      );  
  24.   }    
  25. ])  
Here we are populating the data in $scope using the JSON file. We can do it with the web service also. We can also post the scope data to the server with the web service.

HTML Page
  1. <!DOCTYPE html>  
  2. <html lang='en' ng-app='tableApp'>  
  3. <head>      
  4. <title>Table Example</title>      
  5.     <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js'></script>      
  6.     <script src='js/controller.js' type='text/javascript'></script>  
  7.     <link href='style.css' type='text/css' rel='stylesheet' />  
  8. </head>     
  9. <body ng-controller='tableCtrl'>    
  10. <div id="content">      
  11. <table id='practitioner_table'  >  
  12.        
  13.         <tr>  
  14.             <th colspan="7" style="text-align:right">         
  15.                     <i class="fa fa-search">search   
  16.    
  17.                 <select ng-model="searchObj.practitionerType" ng-options="item.practitionerTypeID as item.practitionerTypeID for item in practitionerType">  
  18.                     <option value="">--Select--</option>  
  19.                 </select>  
  20.        
  21.                 <select ng-disabled="!searchObj.practitionerType" ng-model="searchObj.practitioner_master_id" ng-options="item.practitioner_master_id as item.practitioner_name for item in practitionersByType| filter: {practitionerTypeID:searchObj.practitionerType}">  
  22.                     <option value="">--Select--</option>  
  23.                 </select>  
  24.   
  25.                 <select ng-disabled="!searchObj.practitioner_master_id" ng-model="searchObj.organizationName" ng-options="item.organizationName as item.organizationName for item in OrganizationByPractitioners|filter:{practitioner_master_id:searchObj.practitioner_master_id}">  
  26.                     <option value="">--Select--</option>  
  27.                 </select>  
  28.   
  29.                 </i>   
  30.                 </th>  
  31.             </tr>    
  32.         <tr>           
  33.             <th><a href="#" ng-click="predicate = 'practitionerType';reverse=!reverse">Practitioner Type</a> </th>            
  34.             <th><a href="#" ng-click="predicate = 'practitioner_name';reverse=!reverse">Practitioner Name</a></th>   
  35.             <th><a href="#" ng-click="predicate = 'organizationName';reverse=!reverse">Organization Name</a></th>  
  36.               
  37.               
  38.             </tr>   
  39.         <tr ng-repeat="practitioner in practitionerData | orderBy:predicate:reverse| filter: {practitionerType:searchObj.practitionerType,practitioner_master_id:searchObj.practitioner_master_id,organizationName:searchObj.organizationName}">            
  40.               
  41.             <td   ng-class-odd="'odd'" ng-class-even="'even'"> {{practitioner.practitionerType}}</td>             
  42.             <td   ng-class-odd="'odd'" ng-class-even="'even'"> {{practitioner.practitioner_name}}</td>            
  43.             <td   ng-class-odd="'odd'" ng-class-even="'even'"> {{practitioner.organizationName}}</td>                 
  44.         </tr>       
  45.            
  46. </table>    
  47. </div>      
  48. </body>  
Here we are populating the dropdown and table with scope data. Note the <select> tag and we are cascading the dropdowns using “filter” in “ng-options”. “ng-disabled” is used to keep the child dropdown disabled until the parent dropdown has the value.


Similar Articles