AngularJS Tables

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

The ng-repeat directive is used to draw tables in AngularJS. Displaying tables with AngularJS is very easy and simple.

Let's take an example. This example use ng-repeat directive to draw a table.

See this example:

  1. <table>  
  2.    <tr>  
  3.       <th>Name</th>  
  4.       <th>Marks</th>  
  5.    </tr>  
  6.    <tr ng-repeat = "subject in student.subjects">  
  7.       <td>{{ subject.name }}</td>  
  8.       <td>{{ subject.marks }}</td>  
  9.    </tr>  
  10. </table>  

Displaying with CSS style

You can also style the tables by using CSS.

See this example:

  1.  <style>  
  2.    table, th , td {  
  3.       border: 1px solid grey;  
  4.       border-collapse: collapse;  
  5.       padding: 5px;  
  6.    }  
  7.      
  8.    table tr:nth-child(odd) {  
  9.       background-color: #f2f2f2;  
  10.    }  
  11.   
  12.    table tr:nth-child(even) {  
  13.       background-color: #ffffff;  
  14.    }  
  15. </style>  

AngularJS Table example with CSS

  1.      
  2. <!DOCTYPE html>  
  3. <html>  
  4.    <head>  
  5.       <title>Angular JS Table</title>  
  6.       <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  7.         
  8.       <style>  
  9.          table, th , td {  
  10.             border: 1px solid grey;  
  11.             border-collapse: collapse;  
  12.             padding: 5px;  
  13.          }  
  14.            
  15.          table tr:nth-child(odd) {  
  16.             background-color: #f2f2f2;  
  17.          }  
  18.            
  19.          table tr:nth-child(even) {  
  20.             background-color: #ffffff;  
  21.          }  
  22.       </style>  
  23.    </head>  
  24.    <body>  
  25.       <h2>AngularJS Sample Application</h2>  
  26.       <div ng-app = "mainApp" ng-controller = "studentController">  
  27.          <table border = "0">  
  28.             <tr>  
  29.                <td>Enter first name:</td>  
  30.                <td><input type = "text" ng-model = "student.firstName"></td>  
  31.             </tr>  
  32.             <tr>  
  33.                <td>Enter last name: </td>  
  34.                <td>  
  35.                   <input type = "text" ng-model = "student.lastName">  
  36.                </td>  
  37.             </tr>  
  38.             <tr>  
  39.                <td>Name: </td>  
  40.                <td>{{student.fullName()}}</td>  
  41.             </tr>  
  42.             <tr>  
  43.                <td>Subject:</td>  
  44.               <td>  
  45.                   <table>  
  46.                      <tr>  
  47.                         <th>Name</th>.  
  48.                         <th>Marks</th>  
  49.                      </tr>  
  50.                      <tr ng-repeat = "subject in student.subjects">  
  51.                         <td>{{ subject.name }}</td>  
  52.                         <td>{{ subject.marks }}</td>  
  53.                      </tr>  
  54.                   </table>  
  55.                </td>  
  56.                       
  57.             </tr>  
  58.          </table>  
  59.            
  60.       </div>  
  61.         
  62.       <script>  
  63.          var mainApp = angular.module("mainApp", []);  
  64.            
  65.          mainApp.controller('studentController', function($scope) {  
  66.             $scope.student = {  
  67.                firstName: "Rahul",  
  68.                lastName: "Rai",  
  69.                fees:500,  
  70.                  
  71.                subjects:[  
  72.                   {name:'Physics',marks:850},  
  73.                   {name:'Chemistry',marks:80},  
  74.                   {name:'Math',marks:90},  
  75.                   {name:'English',marks:80},  
  76.                   {name:'Hindi',marks:70}  
  77.                ],  
  78.                  
  79.                fullName: function() {  
  80.                   var studentObject;  
  81.                   studentObject = $scope.student;  
  82.                   return studentObject.firstName + " " + studentObject.lastName;  
  83.                }  
  84.             };  
  85.          });  
  86.       </script>  
  87.    </body>  
  88. </html>