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
- <!DOCTYPE html>
- <html ng-app="studentsModule">
- <head>
- <title></title>
- <h2>Students Details</h2>
- <meta charset="utf-8" />
- <script src="Scripts/angular.min.js"></script>
- <script src="Scripts/StudentsJS.js"></script>
- </head>
- <body ng-controller="studentController">
-
- <div ng-init="students=
- [
- {Name:'Abhishek Singh', Age : 16 ,Course: 'Mathematics'},
- { Name: 'Rohan kumar', Age: 15, Course: 'Boilogy'},
- { Name: 'Rajeev Singh', Age: 15, Course: 'Mathematics' },
- { Name: 'Soni Roy', Age: 15, Course: 'Mathematics'},
- { Name: 'Moni Singh', Age: 15, Course: 'Boilogy'}
- ]">
- <div style="font-size=">Student List</div>
- <br />
- <table style="border:solid">
- <thead>
- <tr>
- <th>
- Student Name
- </th>
- <th>
- Age
- </th>
- <th>
- Course
- </th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="student in students">
- <td>{{student.Name}}</td>
- <td>{{student.Age}}</td>
- <td>{{student.Course}}</td>
- </tr>
-
- </tbody>
-
- </table>
- </div>
- </body>
- </html>
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
-
-
-
- var studentsApp = angular.
- module("studentsModule", []).
- controller("studentController", function ($scope) {
-
- var StudentsList = [
- {Name:"Abhishek Singh", Age : 16 ,Course: "Mathematics"},
- { Name: "Rohan kumar", Age: 15, Course: "Boilogy" },
- { Name: "Rajeev Singh", Age: 15, Course: "Mathematics" },
- { Name: "Soni Roy", Age: 15, Course: "Mathematics" },
- { Name: "Moni Singh", Age: 15, Course: "Boilogy" }
- ];
-
- var studentDetails = {
- studentName: "Abhishek Singh",
- Age: 16,
- Standard: "10th"
- };
- $scope.studentData = studentDetails;
- $scope.message = "Hello from Students Controller!!!!";
- $scope.studentsList = StudentsList;
- });
HTML Code
- <!DOCTYPE html>
- <html ng-app="studentsModule">
- <head>
- <title></title>
- <h2>Students Details</h2>
- <meta charset="utf-8" />
- <script src="Scripts/angular.min.js"></script>
- <script src="Scripts/StudentsJS.js"></script>
- </head>
- <body ng-controller="studentController">
- <div >
- <div style="font-size:large">Student List</div>
- <br />
- <table style="border:solid">
- <thead>
- <tr>
- <th>
- Student Name
- </th>
- <th>
- Age
- </th>
- <th>
- Course
- </th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="student in studentsList">
- <td>{{student.Name}}</td>
- <td>{{student.Age}}</td>
- <td>{{student.Course}}</td>
- </tr>
-
- </tbody>
- </tablestyletablestyle="border:solid">
- </div>
- </body>
- </html>
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
-
-
-
- var studentsApp = angular.
- module("studentsModule", []).
- controller("studentController", function ($scope) {
-
- var StudentsList = [
- {Name:"Abhishek Singh", Age : 16 ,Course: "Mathematics"},
- { Name: "Rohan kumar", Age: 15, Course: "Boilogy" },
- { Name: "Rajeev Singh", Age: 15, Course: "Mathematics" },
- { Name: "Soni Roy", Age: 15, Course: "Mathematics" },
- { Name: "Moni Singh", Age: 15, Course: "Boilogy" }
- ];
-
- var studentDetails = {
- studentName: "Abhishek Singh",
- Age: 16,
- Standard: "10th"
- };
- $scope.studentData = studentDetails;
- $scope.message = "Hello from Students Controller!!!!";
- $scope.studentsList = StudentsList;
- });
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.
- <div >
- <div style="font-size:large">Student List</div>
- <br />
- <table style="border:solid">
- <thead>
- <tr>
- <th>
- Student Name
- </th>
- <th>
- Age
- </th>
- <th>
- Course
- </th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="student in studentsList">
- <td>{{student.Name | uppercase}}</td>
- <td>{{student.Age}}</td>
- <td>{{student.Course | lowercase}}</td>
-
- </tr>
-
- </tbody>
-
- </tablestyletablestyle="border:solid">
-
- </div>
Result
Here you can see the Student Name is in upper case and Course is getting displayed in lower case.
Date Filter
Student.js
-
-
-
- var studentsApp = angular.
- module("studentsModule", []).
- controller("studentController", function ($scope) {
-
- var StudentsList = [
- {Name:"Abhishek Singh", Age : 16 ,Course: "Mathematics" , JoiningDate: "01/01/2016"},
- { Name: "Rohan kumar", Age: 15, Course: "Boilogy", JoiningDate: "06/01/2016" },
- { Name: "Rajeev Singh", Age: 15, Course: "Mathematics", JoiningDate: "04/02/2016" },
- { Name: "Soni Roy", Age: 15, Course: "Mathematics", JoiningDate: "05/03/2016" },
- { Name: "Moni Singh", Age: 15, Course: "Boilogy", JoiningDate: "30/03/2016" }
- ];
-
- var studentDetails = {
- studentName: "Abhishek Singh",
- Age: 16,
- Standard: "10th"
- };
- $scope.studentData = studentDetails;
- $scope.message = "Hello from Students Controller!!!!";
- $scope.studentsList = StudentsList;
- });
orderBy filter
orderBy filter is required for sorting the collection, based on the provided criteria.
HTML Code
- <div >
- <div style="font-size:large">Student List</div>
- <br />
- <table style="border:solid">
- <thead>
- <tr>
- <th>
- Student Name
- </th>
- <th>
- Age
- </th>
- <th>
- Course
- </th>
- <th>
- Joining Date
- </th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="student in studentsList | orderBy:'Name'">
- <td>{{student.Name | uppercase}}</td>
- <td>{{student.Age}}</td>
- <td>{{student.Course | lowercase}}</td>
- <td>{{student.JoiningDate}}</td>
- </tr>
-
- </tbody>
-
- </tablestyletablestyle="border:solid">
-
- </div>
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
-
-
-
- var studentsApp = angular.
- module("studentsModule", []).
- controller("studentController", function ($scope) {
-
- var StudentsList = [
- {Name:"Abhishek Singh", Age : 16 ,Course: "Mathematics" , JoiningDate: "01/01/2016", CourseFee:50000.000},
- { Name: "Rohan kumar", Age: 15, Course: "Boilogy", JoiningDate: "06/01/2016", CourseFee: 60000.50 },
- { Name: "Rajeev Singh", Age: 15, Course: "Mathematics", JoiningDate: "04/02/2016", CourseFee: 50000.000 },
- { Name: "Soni Roy", Age: 15, Course: "Mathematics", JoiningDate: "05/03/2016", CourseFee: 50000.000 },
- { Name: "Moni Singh", Age: 15, Course: "Boilogy", JoiningDate: "30/03/2016", CourseFee: 60000.50 }
- ];
-
- var studentDetails = {
- studentName: "Abhishek Singh",
- Age: 16,
- Standard: "10th"
- };
- $scope.studentData = studentDetails;
- $scope.message = "Hello from Students Controller!!!!";
- $scope.studentsList = StudentsList;
- });
HTML Code
- <div >
- <div style="font-size:large">Student List</div>
- <br />
- <table style="border:solid">
- <thead>
- <tr>
- <th>
- Student Name
- </th>
- <th>
- Age
- </th>
- <th>
- Course
- </th>
- <th>
- Joining Date
- </th>
- <th>
- Course Fee
- </th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="student in studentsList | orderBy:'Name'">
- <td>{{student.Name | uppercase}}</td>
- <td>{{student.Age}}</td>
- <td>{{student.Course | lowercase}}</td>
- <td>{{student.JoiningDate}}</td>
- <td>{{student.CourseFee|number}}</td>
- </tr>
-
- </tbody>
-
- </tablestyletablestyle="border:solid">
-
- </div>
Result
Currency Filter: It basically formats a number to a currency format in the result set.
HTML Code
- <div >
- <div style="font-size:large">Student List</div>
- <br />
- <table style="border:solid">
- <thead>
- <tr>
- <th>
- Student Name
- </th>
- <th>
- Age
- </th>
- <th>
- Course
- </th>
- <th>
- Joining Date
- </th>
- <th>
- Course Fee
- </th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="student in studentsList | orderBy:'Name'">
- <td>{{student.Name | uppercase}}</td>
- <td>{{student.Age}}</td>
- <td>{{student.Course | lowercase}}</td>
- <td>{{student.JoiningDate}}</td>
- <td>{{student.CourseFee|currency}}</td>
- </tr>
-
- </tbody>
- </table>
-
- </div>
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
-
-
- studentsApp.filter("status",function(){
- return function (status)
- {
- switch(status)
- {
- case 0:
- return "Payment Due";
- case 1:
- return "Payment Recieved";
- }
- }
- });
Student.js
-
-
-
- var studentsApp = angular.
- module("studentsModule", []).
- controller("studentController", function ($scope) {
-
- var StudentsList = [
- {Name:"Abhishek Singh", Age : 16 ,Course: "Mathematics" , JoiningDate: "01/01/2016", CourseFee:50000.000,status:0},
- { Name: "Rohan kumar", Age: 15, Course: "Boilogy", JoiningDate: "06/01/2016", CourseFee: 60000.50, status: 1},
- { Name: "Rajeev Singh", Age: 15, Course: "Mathematics", JoiningDate: "04/02/2016", CourseFee: 50000.000, status: 1},
- { Name: "Soni Roy", Age: 15, Course: "Mathematics", JoiningDate: "05/03/2016", CourseFee: 50000.000, status: 1 },
- { Name: "Moni Singh", Age: 15, Course: "Boilogy", JoiningDate: "30/03/2016", CourseFee: 60000.50, status: 0 }
- ];
-
- var studentDetails = {
- studentName: "Abhishek Singh",
- Age: 16,
- Standard: "10th"
- };
- $scope.studentData = studentDetails;
- $scope.message = "Hello from Students Controller!!!!";
- $scope.studentsList = StudentsList;
- });
HTML Code
- <!DOCTYPE html>
- <html ng-app="studentsModule">
- <head>
- <title></title>
- <h2>Students Details</h2>
- <meta charset="utf-8" />
- <script src="Scripts/angular.min.js"></script>
- <script src="Scripts/StudentsJS.js"></script>
- <script src="Scripts/Filter.js"></script>
- </head>
- <body ng-controller="studentController">
-
- <div >
- <div style="font-size:large">Student List</div>
- <br />
- <table style="border:solid">
- <thead>
- <tr>
- <th>
- Student Name
- </th>
- <th>
- Age
- </th>
- <th>
- Course
- </th>
- <th>
- Joining Date
- </th>
- <th>
- Course Fee
- </th>
- <th>
- Status
-
- </th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="student in studentsList | orderBy:'Name'">
- <td>{{student.Name}}</td>
- <td>{{student.Age}}</td>
- <td>{{student.Course | lowercase}}</td>
- <td>{{student.JoiningDate}}</td>
- <td>{{student.CourseFee|currency}}</td>
- <td>{{student.status|status}}</td>
-
-
- status is custom filter here
- </tr>
- </tbody>
- </table >
- </div>
- </body>
- </html>
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
- <div >
- <div style="font-size:large">Student List</div>
- <br />
- arch Student: <input type="text" placeholder="Search Here" ng-model="searchinput" />
-
- <br />
- <br />
- <table style="border:solid">
- <thead>
- <tr>
- <th>
- Student Name
- </th>
- <th>
- Age
- </th>
- <th>
- Course
- </th>
- <th>
- Joining Date
- </th>
- <th>
- Course Fee
- </th>
- <th>
- Status
-
- </th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="student in studentsList | filter:searchinput">
- <td>{{student.Name}}</td>
- <td>{{student.Age}}</td>
- <td>{{student.Course | lowercase}}</td>
- <td>{{student.JoiningDate}}</td>
- <td>{{student.CourseFee|currency}}</td>
- <td>{{student.status|status}}</td>
- </tr>
-
- </tbody>
-
- </table >
-
- </div>
With the input text, I have used ng-model directive, which is bound for a search input.
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
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,
kalu singh raoPosted Jul 21, 2016, 1:46 AM
Nice Article