AngularJS Tables

AngularJS “ng-repeat” directive allows us to create tables in AngularJS. The “ng-repeat” directive repeats the html element to which it is added until all the items in the array are traversed. In AngularJS tables you should add it to “tr” element since this is the element which contains table rows. Take a look at the following example to see how to create AngularJS tables.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

     <div ng-app = "TableApp" ng-controller = "TableController" ng-init="">
         
        <table>
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
          <tr ng-repeat="student in Students | orderBy: 'name'">
            <td>{{ student.name }}</td>
            <td>{{ student.age }}</td>
          </tr>
        </table>
        
      </div>
      
      <script>
         var mainApp = angular.module("TableApp", []);
         
         mainApp.controller('TableController', function($scope) {
            $scope.Students = [
                              {name:'John',age:20},
                              {name:'Alice',age:21},
                              {name:'Mark',age:25},
                              {name:'Carry',age:19},
                              {name:'Bron',age:12}
                             ]
             
         });
      </script>  

</body>
</html>

Download the code Try the code

Take a careful look at the above code. First go to the script section where we create a “TableController”. This controller contains a “Students” array which contains five objects. Each object has two members name and age. All the variables have been initialized with some values.

Now come back to the top and take a look at the view for the “TableController”. It contains a table element. The table element has two rows, one for the header and second for the content. The second “tr” element contains “ng-repeat” directive. Inside this directive we iterate upon each item in the Students array and store it in a temporary “student” variable. With each iteration a new “tr” element is generated at run time with two columns. the first column contains the value for the name variable and the second column contains value for the age variable of the currently iterated object in the Students array. Since there are five items in the “Students” array, you shall see five content rows generated in the table.

Adding Styles To Table

Let us add some styles to our table to make it look more beautiful. Take a look at the following code sample.

<!DOCTYPE html>
<html>
    
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <style>
    table, th , td {
      border: 1px solid grey;
      padding: 7px;
      border-collapse: collapse;
      
    }
    table tr:nth-child(even) {
    background-color: skyblue;
    }
    table tr:nth-child(odd) {
    background-color: #f1f1f1;
    }

   
    </style>
</head>
    
<body>

     <div ng-app = "TableApp" ng-controller = "TableController" ng-init="">
         
        <table>
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
          <tr ng-repeat="student in Students | orderBy: 'name'">
            <td>{{ student.name | uppercase}}</td>
            <td>{{ student.age | uppercase}}</td>
          </tr>
        </table>
        
      </div>
      
      <script>
         var mainApp = angular.module("TableApp", []);
         
         mainApp.controller('TableController', function($scope) {
            $scope.Students = [
                              {name:'John',age:20},
                              {name:'Alice',age:21},
                              {name:'Mark',age:25},
                              {name:'Carry',age:19},
                              {name:'Bron',age:12}
                             ]
             
         });
      </script>  

</body>
</html>

Download the code Try the code

Now if you open the page in browser, you will see alternate table rows styled in different colors. Also you will notice that all the table items are in capital. This is because we have used uppercase filter with each table item inside the “ng-repeat” directive.

<<< AngularJS Service CreationAngularJS Select >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .