Easy Code Stuff: filter

Dec 15, 2015

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.

Dec 2, 2015

Quick Start With AngularJS Repeat Along With Filters

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

Hope You Have A Simple Idea About AngularJS And ng-init.If You Are New To These Please Click Here Before Start.

Lets Start With Simple AngularJS Code Along With A Data Array Which Contains Array Of Names.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
    </div>
</body>
</html>

Now Lets Bind These Names Into A Un-Ordered List. ng-repeat Will Loop Through The Array Just Like A Simple For Each Loop In JQuery. So Lets Do It. I Will Loop Through All The Names And Bind It Inside The <li> Tag Using AngularJS Expression.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
     <ul>
       <li ng-repeat = "Name in Names">
         {{Name}}
       </li>
     </ul>
   </div>
  </body>
</html>

If You See This In Browser You Will Get The Following Output.

Nifal
Gowtham
Dinesh
Hudhaifa
Sam
Anderson

So We Are Done With ng-repeat. Lets See How We Can Use Filters. Actually What Filters Does Is, Its Return A Subset Of Items From An Array. AngularJS Provides Following Filters To Use.

lowercase : Converts A String To Lower Case.
uppercase : Converts A String To Upper Case.
filter : Selects A Subset Of Items From An Array.
orderby : Order The Array Elements By Using Given Expression.
currency : Formats A Number Into Currency.

Lets Use These Filters. I'm Going To Make All The Names To Upper Case Now By Using Following Expression.

1	{{ Name \| uppercase }}

If You Want To Make It Lowercase Simply Use Replace The "uppercase" With "lowercase".

1	{{ Name \| lowercase }}

Lets See How We Can Use Filters.This Is How We Create Strings In AngularJS. For That I'm Using A Text Field To Enter The Filter Text.

1	Filter Text: <input type="text" ng-model="FilterText">

Lets Apply This Filter To Our Code.

1	ng-repeat = "Name in Names \| filter:FilterText"

Lets See Our Full Code.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    Filter Text: <input type="text" ng-model="FilterText">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
     <ul>
       <li ng-repeat = "Name in Names | filter:FilterText">
         {{ Name | uppercase }}
       </li>
     </ul>
   </div>
  </body>
</html>

If You See This In Browser You Will Get The Following Output.

Hope You Had Good Knowledge About AngularJS Expressions And Variables.

Check My Next Article About AngularJS Controllers.

Dec 15, 2015

Creating A Table In AngularJS With Filters

Dec 2, 2015

Quick Start With AngularJS Repeat Along With Filters

JWT Token Decode Using Jquery