In hour 1 of this series we learned how to get started with AngularJS.
In hour 2 of this series we learned about AngularJS Templates.
In this hour we will learn about:
- Filter
- orderBy
- Two-way binding
To start with I have put a search box with a ng-model directive set.
![]()
Now the filter can be applied to the repeater directive by providing an option filter. In the filter we need to set a value as:
![]()
Let us consider understanding what exactly is happening here. The first thing is Data Binding that is the core feature of AngularJS. Angular binds the name of the input box to a variable in the data model. This is two-way binding. Two-way binding keeps an input box and data model in sync.
![]()
Later we are using the filter function. This function will use an input box ng-model value to create a new array that will contain a filtered value based on the matched ng-model value from the input box. Next let us see how easy the orderBy function can be implemented in AngularJS. Let us say we have a drop down as below:
![]()
We have created a drop down with two options. Both options have a value as the properties of the controller. Next just to sort the order set orderBy function value to the ng-model value of the drop down list.
![]()
For your reference the full source code for the Controller is given below.
- var AuthorApp = angular.module('AuthorApp', []);
-
- AuthorApp.controller('AuthorController', function ($scope) {
- $scope.authors =
- [
- { 'name': 'Dhananjay Kumar','age':'32' },
- { 'name': 'Pinal Dave', 'age': '35' },
- { 'name': 'Glen Block', 'age': '40' },
- { 'name': 'Dan Wahlin', 'age': '40' },
- { 'name': 'Mahesh Chand', 'age': '41' },
- { 'name': 'Prabhjot Singh', 'age': '42' },
- { 'name': 'Julie Learman', 'age': '38' }
- ];
-
-
- });
The source code of the View is given below:
- <!DOCTYPE html>
- <html ng-app="AuthorApp">
- <head>
- <title>Angular Demo</title>
- <script src="Scripts/angular.min.js"></script>
- <script src="Author.js"></script>
- </head>
- <body ng-controller="AuthorController">
-
- Search: <input ng-model="searchtext">
-
- Sort:
- <select ng-model="sortorder">
- <option value="name">Name</option>
- <option value="age">Age</option>
- </select>
-
- <ul>
- <li ng-repeat="author in authors |
- filter:searchtext |
- orderBy:sortorder">
- {{author.name}} is {{author.age}} years old
-
- </li>
- </ul>
- </body>
- </html>
I hope you find this hour 3 of AngularJS series helpful. Thanks for reading. Happy coding.