Post
Ask Question

Binding Table With JSON String Using Angular

JSON String
 
Define a well structured Json string as shown below, this Json string contains the data of 2 IT departments:
  1. var dept1 = {  
  2.     "data": [{  
  3.             "Name": "Godly Mathew",  
  4.             "City": "Dubai",  
  5.             "Country": "UAE"  
  6.     },  
  7.             {  
  8.             "Name": "Anoop Ravi",  
  9.             "City": "Dubai",  
  10.             "Country": "UAE"  
  11.     },  
  12.             {  
  13.             "Name": "Vishnu Raj",  
  14.             "City": "Dubai",  
  15.             "Country": "UAE"  
  16.     },  
  17.               
  18.             {  
  19.             "Name": "Jimcy Alex",  
  20.             "City": "Dubai",  
  21.             "Country": "UAE"  
  22.     },  
  23.               
  24.             {  
  25.             "Name": "Bimcy Thomas",  
  26.             "City": "Dubai",  
  27.             "Country": "UAE"  
  28.     }]  
  29. }  
  30. var dept2 = {  
  31.   
  32.     "data": [  
  33.             {  
  34.             "Name": "Samson Mathew",  
  35.             "City": "Dubai",  
  36.             "Country": "UAE"  
  37.     },  
  38.           
  39.             {  
  40.             "Name": "Benson Thomas",  
  41.             "City": "Dubai",  
  42.             "Country": "UAE"  
  43.     },  
  44.           
  45.             {  
  46.             "Name": "Aby Abraham",  
  47.             "City": "Dubai",  
  48.             "Country": "UAE"  
  49.     }  
  50. ]  
  51. }  
JS (Functions)

  2. var app = angular.module('myApp', []);  
  3.   
  4. app.controller('employees', function($scope, $http) {  
  5.     $scope.names = dept1.data;  
  6.     $scope.next = function() {  
  7.         $scope.names = dept2.data;  
  8.     }  
  9.      $scope.prev = function() {  
  10.         $scope.names = dept1.data;  
  11.     }  
  12. }); 
HTML 
  1. <div ng-app="myApp" ng-controller="employees">    
  2.     <input type="button" value="Development" ng-click="prev();">    
  3.           <input type="button" value="Testing" ng-click="next();">    
  4.     <table>    
  5.         <tr ng-repeat="x in names">    
  6.             <td>{{ x.Name }}</td>    
  7.             <td>{{ x.Country }}</td>    
  8.         </tr>    
  9.     </table>    
  10. </div>    
  11.            
CSS
  1. table {    
  2.     border-collapse: collapse;    
  3.     width: 100%;    
  4. }    
  5. th, td {    
  6.     padding: 0.25rem;    
  7.     text-align: left;    
  8.     border: 1px solid #ccc;    
  9. }    
  10. tbody tr:hover {    
  11.     background: yellow;    
  12. }    
  13.