Post
Ask Question

Learning AngularJS Simplified - Lab Three

Introduction

My previous lab series on Angular was to understand the framework basics and learn the basic features of AngularJS. In this lab, I am leveraging the power of AngularJS.

You can go through the links of the articles to learn the basics.

ng-init directive

The ng-init directive allows you to evaluate an expression in the current scope. It can also be used to initialize Application data.

HTML Code

  1. <!DOCTYPE html>  
  2. <html ng-app="studentsModule">  
  3. <head>  
  4.     <title></title>  
  5.     <h2>Students Details</h2>  
  6.     <meta charset="utf-8" />  
  7.     <script src="Scripts/angular.min.js"></script>  
  8.     <script src="Scripts/StudentsJS.js"></script>  
  9. </head>  
  10. <body ng-controller="studentController">  
  11.       
  12. <div ng-init="students=  
  13.                 [  
  14.                  {Name:'Abhishek Singh', Age : 16 ,Course: 'Mathematics'},  
  15.                  { Name: 'Rohan kumar', Age: 15, Course: 'Boilogy'},  
  16.                  { Name: 'Rajeev Singh', Age: 15, Course: 'Mathematics' },  
  17.                  { Name: 'Soni Roy', Age: 15, Course: 'Mathematics'},  
  18.                  { Name: 'Moni Singh', Age: 15, Course: 'Boilogy'}  
  19.              ]">  
  20.         <div style="font-size=">Student List</div>  
  21.         <br />  
  22.        <table style="border:solid">  
  23.          <thead>  
  24.              <tr>  
  25.                  <th>  
  26.                      Student Name  
  27.                  </th>  
  28.                  <th>  
  29.                      Age  
  30.                  </th>  
  31.                  <th>  
  32.                      Course  
  33.                  </th>  
  34.        </tr>  
  35.          </thead>  
  36.            <tbody>  
  37.                <tr ng-repeat="student in students">  
  38.                    <td>{{student.Name}}</td>  
  39.                    <td>{{student.Age}}</td>  
  40.                    <td>{{student.Course}}</td>  
  41.                </tr>  
  42.   
  43.            </tbody>  
  44.   
  45.        </table>  
  46.     </div>  
  47. </body>  
  48. </html>  
Result

Result

Using the code, given above, I am trying to demonstrate the directive ng-init.

Using ng-init directive array of the students with three properties is being evaluated and it is being used by another directive ng-repeat to iterate through the loop and display to the Browser by HTML table element.

Here, the scope of the array is with the div element and will be available to the child elements of the div.

ng-repeat directive

ng-repeate directive is nothing but it provides a functionality  for each loop, as it iterates through the collection.

Here in students.js file, I have created a model, which is StudentsList, which is further attached to the scope object.

In HTML code,I am using ng-repeat directive which is nothing but a for each loop. I have iterated though the loop and read the values of different propertyies and got them displayed, using a table element to the Browser.

Students.js
  1. //step1  
  2. /// <reference path="angular.min.js" />  
  3.   
  4. var studentsApp = angular.  
  5.          module("studentsModule", []).  
  6.          controller("studentController", function ($scope) {  
  7.   
  8.              var StudentsList = [  
  9.                  {Name:"Abhishek Singh", Age : 16 ,Course: "Mathematics"},  
  10.                  { Name: "Rohan kumar", Age: 15, Course: "Boilogy" },  
  11.                  { Name: "Rajeev Singh", Age: 15, Course: "Mathematics" },  
  12.                  { Name: "Soni Roy", Age: 15, Course: "Mathematics" },  
  13.                  { Name: "Moni Singh", Age: 15, Course: "Boilogy" }  
  14.              ];  
  15.   
  16.              var studentDetails = {  
  17.                  studentName: "Abhishek Singh",  
  18.                  Age: 16,  
  19.                  Standard: "10th"  
  20.              };  
  21.      $scope.studentData = studentDetails;  
  22.      $scope.message = "Hello from Students Controller!!!!";  
  23.      $scope.studentsList = StudentsList;  
  24.          });  
HTML Code
  1. <!DOCTYPE html>  
  2. <html ng-app="studentsModule">  
  3. <head>  
  4.     <title></title>  
  5.     <h2>Students Details</h2>  
  6.     <meta charset="utf-8" />  
  7.     <script src="Scripts/angular.min.js"></script>  
  8.     <script src="Scripts/StudentsJS.js"></script>  
  9. </head>  
  10. <body ng-controller="studentController">  
  11.     <div >  
  12.         <div style="font-size:large">Student List</div>  
  13.         <br />  
  14.         <table style="border:solid">  
  15.             <thead>  
  16.                 <tr>  
  17.                     <th>  
  18.                         Student Name  
  19.                     </th>  
  20.                     <th>  
  21.                         Age  
  22.                     </th>  
  23.                     <th>  
  24.                         Course  
  25.                     </th>  
  26.                 </tr>  
  27.             </thead>  
  28.             <tbody>  
  29.                 <tr ng-repeat="student in studentsList">  
  30.                     <td>{{student.Name}}</td>  
  31.                     <td>{{student.Age}}</td>  
  32.                     <td>{{student.Course}}</td>  
  33.                 </tr>  
  34.   
  35.             </tbody>  
  36.             </tablestyletablestyle="border:solid">  
  37.     </div>  
  38. </body>  
  39. </html>  
Result

Result

Angular Filters

Using AngularJS Filters, the functionalities given below can be achieved. 
  • Data can be formatted.
  • Filtered data can be displayed.
  • Sorted data can be displayed

Filters can be used with an expression or directives, using pipe | sign. 

Filter Detail
Uppercase/Lowercase Converts a string to upper case and lower case respectively
Date Formats a date to string in a specified format.
Number Formats a numeric data as text with a comma and fraction.
Currency Formats a numeric data into a specified currency format.
Filter Filters an array based on a specified criteria
orderBy Sorts an array based on a specified predicate expression.
limitTo Returns new array containing specified number of the elements from an existing array.

You can find the list of filters, using the link. .

Student.js

  1. //step1  
  2. /// <reference path="angular.min.js" />  
  3.   
  4. var studentsApp = angular.  
  5.          module("studentsModule", []).  
  6.          controller("studentController", function ($scope) {  
  7.   
  8.              var StudentsList = [  
  9.                  {Name:"Abhishek Singh", Age : 16 ,Course: "Mathematics"},  
  10.                  { Name: "Rohan kumar", Age: 15, Course: "Boilogy" },  
  11.                  { Name: "Rajeev Singh", Age: 15, Course: "Mathematics" },  
  12.                  { Name: "Soni Roy", Age: 15, Course: "Mathematics" },  
  13.                  { Name: "Moni Singh", Age: 15, Course: "Boilogy" }  
  14.              ];  
  15.   
  16.              var studentDetails = {  
  17.                  studentName: "Abhishek Singh",  
  18.                  Age: 16,  
  19.                  Standard: "10th"  
  20.              };  
  21.      $scope.studentData = studentDetails;  
  22.      $scope.message = "Hello from Students Controller!!!!";  
  23.      $scope.studentsList = StudentsList;  
  24.          });  
Uppercase & Lowercase

The uppercase filter converts the string to upper case and lowercase filter converts the string to lower case.

It will be applied to the expression or at directive level using pipe (|) as a separator.
  1. <div >  
  2.         <div style="font-size:large">Student List</div>  
  3.         <br />  
  4.         <table style="border:solid">  
  5.             <thead>  
  6.                 <tr>  
  7.                     <th>  
  8.                         Student Name  
  9.                     </th>  
  10.                     <th>  
  11.                         Age  
  12.                     </th>  
  13.                     <th>  
  14.                         Course  
  15.                     </th>  
  16.                 </tr>  
  17.             </thead>  
  18.             <tbody>  
  19.                 <tr ng-repeat="student in studentsList">  
  20.                     <td>{{student.Name | uppercase}}</td>  
  21.                     <td>{{student.Age}}</td>  
  22.                     <td>{{student.Course | lowercase}}</td>  
  23.                     <!--  <td>{{student.name}}</td>-->  
  24.                 </tr>  
  25.   
  26.             </tbody>  
  27.   
  28.             </tablestyletablestyle="border:solid">  
  29.   
  30.     </div>  
Result

Result

Here you can see the Student Name is in upper case and Course is getting displayed in lower case.

Date Filter

Student.js
  1. //step1  
  2. /// <reference path="angular.min.js" />  
  3.   
  4. var studentsApp = angular.  
  5.          module("studentsModule", []).  
  6.          controller("studentController", function ($scope) {  
  7.   
  8.              var StudentsList = [  
  9.                  {Name:"Abhishek Singh", Age : 16 ,Course: "Mathematics" , JoiningDate: "01/01/2016"},  
  10.                  { Name: "Rohan kumar", Age: 15, Course: "Boilogy", JoiningDate: "06/01/2016" },  
  11.                  { Name: "Rajeev Singh", Age: 15, Course: "Mathematics", JoiningDate: "04/02/2016" },  
  12.                  { Name: "Soni Roy", Age: 15, Course: "Mathematics", JoiningDate: "05/03/2016" },  
  13.                  { Name: "Moni Singh", Age: 15, Course: "Boilogy", JoiningDate: "30/03/2016" }  
  14.              ];  
  15.   
  16.              var studentDetails = {  
  17.                  studentName: "Abhishek Singh",  
  18.                  Age: 16,  
  19.                  Standard: "10th"  
  20.              };  
  21.      $scope.studentData = studentDetails;  
  22.      $scope.message = "Hello from Students Controller!!!!";  
  23.      $scope.studentsList = StudentsList;  
  24.          });  
orderBy filter

orderBy filter is required for sorting the collection, based on the provided criteria.

HTML Code
  1. <div >  
  2.         <div style="font-size:large">Student List</div>  
  3.         <br />  
  4.         <table style="border:solid">  
  5.             <thead>  
  6.                 <tr>  
  7.                     <th>  
  8.                         Student Name  
  9.                     </th>  
  10.                     <th>  
  11.                         Age  
  12.                     </th>  
  13.                     <th>  
  14.                         Course  
  15.                     </th>  
  16.                     <th>  
  17.                         Joining Date  
  18.                     </th>  
  19.                 </tr>  
  20.             </thead>  
  21.             <tbody>  
  22.                 <tr ng-repeat="student in studentsList | orderBy:'Name'">  
  23.                     <td>{{student.Name | uppercase}}</td>  
  24.                     <td>{{student.Age}}</td>  
  25.                     <td>{{student.Course | lowercase}}</td>  
  26.                     <td>{{student.JoiningDate}}</td>  
  27.                 </tr>  
  28.   
  29.             </tbody>  
  30.   
  31.             </tablestyletablestyle="border:solid">  
  32.   
  33.     </div>  
Result

Result

The Result set, shown above, is being ordered by student Name. Angular Filter in above example is applied to ng-repeat directive.

Number Filer

It actually helps to format the number in the result set.

Student.js
  1. //step1  
  2. /// <reference path="angular.min.js" />  
  3.   
  4. var studentsApp = angular.  
  5.          module("studentsModule", []).  
  6.          controller("studentController", function ($scope) {  
  7.   
  8.              var StudentsList = [  
  9.                  {Name:"Abhishek Singh", Age : 16 ,Course: "Mathematics" , JoiningDate: "01/01/2016", CourseFee:50000.000},  
  10.                  { Name: "Rohan kumar", Age: 15, Course: "Boilogy", JoiningDate: "06/01/2016", CourseFee: 60000.50 },  
  11.                  { Name: "Rajeev Singh", Age: 15, Course: "Mathematics", JoiningDate: "04/02/2016", CourseFee: 50000.000 },  
  12.                  { Name: "Soni Roy", Age: 15, Course: "Mathematics", JoiningDate: "05/03/2016", CourseFee: 50000.000 },  
  13.                  { Name: "Moni Singh", Age: 15, Course: "Boilogy", JoiningDate: "30/03/2016", CourseFee: 60000.50 }  
  14.              ];  
  15.   
  16.              var studentDetails = {  
  17.                  studentName: "Abhishek Singh",  
  18.                  Age: 16,  
  19.                  Standard: "10th"  
  20.              };  
  21.      $scope.studentData = studentDetails;  
  22.      $scope.message = "Hello from Students Controller!!!!";  
  23.      $scope.studentsList = StudentsList;  
  24.          });  
HTML Code
  1. <div >  
  2.         <div style="font-size:large">Student List</div>  
  3.         <br />  
  4.         <table style="border:solid">  
  5.             <thead>  
  6.                 <tr>  
  7.                     <th>  
  8.                         Student Name  
  9.                     </th>  
  10.                     <th>  
  11.                         Age  
  12.                     </th>  
  13.                     <th>  
  14.                         Course  
  15.                     </th>  
  16.                     <th>  
  17.                         Joining Date  
  18.                     </th>  
  19.                     <th>  
  20.                         Course Fee  
  21.                     </th>  
  22.                 </tr>  
  23.             </thead>  
  24.             <tbody>  
  25.                 <tr ng-repeat="student in studentsList | orderBy:'Name'">  
  26.                     <td>{{student.Name | uppercase}}</td>  
  27.                     <td>{{student.Age}}</td>  
  28.                     <td>{{student.Course | lowercase}}</td>  
  29.                     <td>{{student.JoiningDate}}</td>  
  30.                     <td>{{student.CourseFee|number}}</td>  
  31.                 </tr>  
  32.   
  33.             </tbody>  
  34.   
  35.             </tablestyletablestyle="border:solid">  
  36.   
  37.     </div>  
Result
Result

Currency Filter: It basically formats a number to a currency format in the result set.

HTML Code
  1. <div >  
  2.     <div style="font-size:large">Student List</div>  
  3.     <br />  
  4.     <table style="border:solid">  
  5.         <thead>  
  6.             <tr>  
  7.                 <th>  
  8.                     Student Name  
  9.                 </th>  
  10.                 <th>  
  11.                     Age  
  12.                 </th>  
  13.                 <th>  
  14.                     Course  
  15.                 </th>  
  16.                 <th>  
  17.                     Joining Date  
  18.                 </th>  
  19.                 <th>  
  20.                     Course Fee  
  21.                 </th>  
  22.             </tr>  
  23.         </thead>  
  24.         <tbody>  
  25.             <tr ng-repeat="student in studentsList | orderBy:'Name'">  
  26.                 <td>{{student.Name | uppercase}}</td>  
  27.                 <td>{{student.Age}}</td>  
  28.                 <td>{{student.Course | lowercase}}</td>  
  29.                 <td>{{student.JoiningDate}}</td>  
  30.                 <td>{{student.CourseFee|currency}}</td>  
  31.             </tr>  
  32.   
  33.         </tbody>  
  34.         </table>  
  35.   
  36. </div>  
Result

Result

The result set, shown above, is formatted with the default currency dollar. We can use our own format to get the result formatted.

Custom Filter

It is a user created filter which can be applied as an Angular filter to provide the custom logic for the result set. Basically, the custom filter is nothing but a function, which returns a function. Let me explain how to create a custom filter and where it should be used.

Suppose, in the example, there is a property status, which has a value 0 or 1, which means if it is 0, it will be the payment due and 1 for the payment received. For this, a custom filter is required.

Step 1: Create a JS file with a function,

Filter.js
  1. /// <reference path="StudentsJS.js" />  
  2.   
  3. studentsApp.filter("status",function(){  
  4.     return function (status)  
  5.     {  
  6.         switch(status)  
  7.         {  
  8.             case 0:  
  9.                 return "Payment Due";  
  10.             case 1:  
  11.                 return "Payment Recieved";             
  12.         }  
  13.     }  
  14. });  
Student.js
  1. //step1  
  2. /// <reference path="angular.min.js" />  
  3.   
  4. var studentsApp = angular.  
  5.          module("studentsModule", []).  
  6.          controller("studentController", function ($scope) {  
  7.   
  8.              var StudentsList = [  
  9.                  {Name:"Abhishek Singh", Age : 16 ,Course: "Mathematics" , JoiningDate: "01/01/2016", CourseFee:50000.000,status:0},  
  10.                  { Name: "Rohan kumar", Age: 15, Course: "Boilogy", JoiningDate: "06/01/2016", CourseFee: 60000.50, status: 1},  
  11.                  { Name: "Rajeev Singh", Age: 15, Course: "Mathematics", JoiningDate: "04/02/2016", CourseFee: 50000.000, status: 1},  
  12.                  { Name: "Soni Roy", Age: 15, Course: "Mathematics", JoiningDate: "05/03/2016", CourseFee: 50000.000, status: 1 },  
  13.                  { Name: "Moni Singh", Age: 15, Course: "Boilogy", JoiningDate: "30/03/2016", CourseFee: 60000.50, status: 0 }  
  14.              ];  
  15.   
  16.              var studentDetails = {  
  17.                  studentName: "Abhishek Singh",  
  18.                  Age: 16,  
  19.                  Standard: "10th"  
  20.              };  
  21.      $scope.studentData = studentDetails;  
  22.      $scope.message = "Hello from Students Controller!!!!";  
  23.      $scope.studentsList = StudentsList;  
  24.          });  
HTML Code
  1. <!DOCTYPE html>  
  2. <html ng-app="studentsModule">  
  3. <head>  
  4.     <title></title>  
  5.     <h2>Students Details</h2>  
  6.     <meta charset="utf-8" />  
  7.     <script src="Scripts/angular.min.js"></script>  
  8.     <script src="Scripts/StudentsJS.js"></script>  
  9.     <script src="Scripts/Filter.js"></script>  
  10. </head>  
  11. <body ng-controller="studentController">  
  12.   
  13.     <div >  
  14.         <div style="font-size:large">Student List</div>  
  15.         <br />  
  16.         <table style="border:solid">  
  17.             <thead>  
  18.                 <tr>  
  19.                     <th>  
  20.                         Student Name  
  21.                     </th>  
  22.                     <th>  
  23.                         Age  
  24.                     </th>  
  25.                     <th>  
  26.                         Course  
  27.                     </th>  
  28.                     <th>  
  29.                         Joining Date  
  30.                     </th>  
  31.                     <th>  
  32.                         Course Fee  
  33.                     </th>  
  34.                     <th>  
  35.                         Status  
  36.   
  37.                     </th>  
  38.                 </tr>  
  39.             </thead>  
  40.             <tbody>  
  41.                 <tr ng-repeat="student in studentsList | orderBy:'Name'">  
  42.                     <td>{{student.Name}}</td>  
  43.                     <td>{{student.Age}}</td>  
  44.                     <td>{{student.Course | lowercase}}</td>  
  45.                     <td>{{student.JoiningDate}}</td>  
  46.                     <td>{{student.CourseFee|currency}}</td>  
  47.                     <td>{{student.status|status}}</td>  
  48.   
  49.                                         
  50.                                        status is custom filter here  
  51.                 </tr>  
  52.             </tbody>  
  53.             </table >  
  54.     </div>  
  55. </body>  
  56. </html>  
Result

Result

Search Filter

This filter will provide a way to search the text though out the table and gives the result sets which are satisfying the condition.

HTML Code
  1. <div >  
  2.     <div style="font-size:large">Student List</div>  
  3.     <br />  
  4. arch Student: <input type="text" placeholder="Search Here" ng-model="searchinput" />  
  5.   
  6.     <br />  
  7.     <br />  
  8.     <table style="border:solid">  
  9.         <thead>  
  10.             <tr>  
  11.                 <th>  
  12.                     Student Name  
  13.                 </th>  
  14.                 <th>  
  15.                     Age  
  16.                 </th>  
  17.                 <th>  
  18.                     Course  
  19.                 </th>  
  20.                 <th>  
  21.                     Joining Date  
  22.                 </th>  
  23.                 <th>  
  24.                     Course Fee  
  25.                 </th>  
  26.                 <th>  
  27.                     Status  
  28.   
  29.                 </th>  
  30.             </tr>  
  31.         </thead>  
  32.         <tbody>  
  33.        <tr ng-repeat="student in studentsList | filter:searchinput">  
  34.                 <td>{{student.Name}}</td>  
  35.                 <td>{{student.Age}}</td>  
  36.                 <td>{{student.Course | lowercase}}</td>  
  37.                 <td>{{student.JoiningDate}}</td>  
  38.                 <td>{{student.CourseFee|currency}}</td>  
  39.                 <td>{{student.status|status}}</td>  
  40.             </tr>  
  41.   
  42.         </tbody>  
  43.   
  44.         </table >  
  45.   
  46. </div>  
With the input text, I have used ng-model directive, which is bound for a search input.

Result

Result

You can specify which column is wanted to do a search by doing a simple change in the ng-model code.

ng-model="searchinput.Age"

Result

Result

The code, shown above, will help you to search on the basis of age only. Similarly, you can specify any column and restrict your search to the particular column only.

More labs on AngularJs will be coming soon.

Resource References

You can read more for the directive, using API reference of Angular Website, 


Similar Articles