Easy Code Stuff: Creating A Table In AngularJS With Filters

In This Article I'm Going To Explain You Guys About Creating A Table In AngularJS Using Repeat (ng-repeat) Along With Filters. AngularJS Repeat Used To Bind HTML Elements Once for Each Item In An Array Or Object Of Data.

Lets Start From The Bottom. Below Codes Give A Simple Table.

<html>
  <body>
    <table border="1">
      <tr>
         <th>Name</th>
         <th>Name</th>
         <th>Age</th>
      </tr>
      <tr>
        <td>158</td>
         <td>Nifal</td>
         <td>25</td>
      </tr>
      <tr>
        <td>122</td>
        <td>Dinesh</td>
        <td>24</td>
      </tr>
      <tr>
        <td>133</td>
        <td>Asjad</td>
        <td>21</td>
      </tr>
      <tr>
        <td>134</td>
        <td>Hudhaifa</td>
        <td>22</td>
      </tr>
      <tr>
        <td>165</td>
        <td>Gowtham</td>
        <td>24</td>
      </tr>
    </table>
  </body>
</html>

Lets See How We Can Create Above Table With AngularJS Code Along With A Data Array Which Contains Array Of Students. First Of All I'm Creating A Controller Which Gives The Students Object Array.

var app = angular.module('myApp', []);
app.controller('StudentController', function ($scope) {
    $scope.Students = [
          { Id: 158, Name: "Nifal", Age: 25 },
          { Id: 122, Name: "Dinesh", Age: 24 },
          { Id: 133, Name: "Asjad", Age: 21 },
          { Id: 134, Name: "Hudhaifa", Age: 22 },
          { Id: 165, Name: "Gowtham", Age: 24 }
      ];
});

Now Lets Use This Controller And Bind It To The Table Using AngularJS Repeat And Expressions.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="StudentController">
      <table border="1">
        <tr>
          <th>Id</th>
           <th>Name</th>
          <th>Age</th>
        </tr>
        <tr ng-repeat="Student in Students">
          <td>{{Student.Id}}</td>  
          <td>{{Student.Name}}</td>
          <td>{{Student.Age}}</td>
        </tr>
      </table>
    </div>
    <script type="text/javascript" >
        var app = angular.module('myApp', []);
        app.controller('StudentController', function ($scope) {
            $scope.Students = [
           { Id: 158, Name: "Nifal", Age: 25 },
           { Id: 122, Name: "Dinesh", Age: 24 },
           { Id: 133, Name: "Asjad", Age: 21 },
           { Id: 134, Name: "Hudhaifa", Age: 22 },
           { Id: 165, Name: "Gowtham", Age: 24 }
         ];
        });
    </script>
  </body>

Lets Say, You Want To Print The Row Number In The Table. In Order To Do That You Can Use The Table Index ($index). Just Treat The Index As A Variable And Bind It. Normally Index Starts With Zero. So Add One To It.

1	<td>{{$index + 1}}</td>

Lets Say, You Want To Style The Table By Giving Different Colors To Table Rows. You Can Use $even And $odd To Do That. Use AngularJS If Condition(ng-if) To Do That.

<tr ng-repeat="Student in Students">
  <td ng-if="$odd" style="color:red">{{Student.Id}}</td> 
  <td ng-if="$even" style="color:blue">{{Student.Id}}</td>   
  <td ng-if="$odd" style="color:red">{{Student.Name}}</td>
  <td ng-if="$even" style="color:blue">{{Student.Name}}</td>
  <td ng-if="$odd" style="color:red">{{Student.Age}}</td>
  <td ng-if="$even" style="color:blue">{{Student.Age}}</td>
</tr>

You Can Use Filters As You Wish When You Looping Through It. Lets Say, You Want To Order The Table Data Using Students Age. Use "orderby" Filter.

1	<tr ng-repeat="Student in Students \| orderBy : 'Age' ">

See The Full Code Below, Which Used All The Things We Discussed Above.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="StudentController">
      <table border="1">
        <tr>
          <th></th>
          <th>Id</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
        <tr ng-repeat="Student in Students | orderBy : 'Age' ">
          <td ng-if="$odd" style="color:red">{{$index + 1}}</td>  
          <td ng-if="$even" style="color:blue">{{$index + 1}}</td>  
          <td ng-if="$odd" style="color:red">{{Student.Id}}</td> 
          <td ng-if="$even" style="color:blue">{{Student.Id}}</td>   
          <td ng-if="$odd" style="color:red">{{Student.Name}}</td>
          <td ng-if="$even" style="color:blue">{{Student.Name}}</td>
          <td ng-if="$odd" style="color:red">{{Student.Age}}</td>
          <td ng-if="$even" style="color:blue">{{Student.Age}}</td>
        </tr>
      </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('StudentController', function ($scope) {
            $scope.Students = [
                { Id: 158, Name: "Nifal", Age: 25 },
                { Id: 122, Name: "Dinesh", Age: 24 },
                { Id: 133, Name: "Asjad", Age: 21 },
                { Id: 134, Name: "Hudhaifa", Age: 22 },
                { Id: 165, Name: "Gowtham", Age: 24 }
            ];
        });
    </script>
  </body> 
</html>

Hope You Enjoyed The Article.

Easy Code Stuff

Dec 15, 2015

Creating A Table In AngularJS With Filters

No comments:

JWT Token Decode Using Jquery