AngularJS is a High Level Programming language. To search data from a list of records AngularJS provides filter keyword. AngularJS Filter is a way that will help you to transform your data to an appropriate representation in the View in a certain format. There are many inbuilt filters provided by AngularJS that give us the way to format our data in View. With these built-in filters, we can format & show our data in various ways. Text can be shown in uppercase, lowercase. Date can be also represented in various formats. All we need to do is add a “|” (pipe) after the data.
In the following example I listed out many countries in Controller with a scope variable Countries. Using an input control I am passing my search queries. AngularJS ng-model works here to make the input control as a query passing control. While binding data using ng-repeat to a ul element I used filter keyword to filter my query.
To run this example you can copy this code to a notepad file & save it as html. I am using CDN link to refer AngularJS library. To successfully run the example below be sure you are with Internet Connectivity.
Example of AngularJS Filter
<html ng-app="CountriesMod">
<head>
<title>Example to use filter in AngularJS?</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript">
var CountriesMod = angular.module('CountriesMod', []);
CountriesMod.controller('CountriesCon', function ($scope) {
$scope.Countries = [ {'CountryName': 'Afghanistan'}, {'CountryName': 'Algeria'}, {'CountryName': 'Bahamas'}, {'CountryName': 'Bangladesh'}, {'CountryName': 'Belgium'}, {'CountryName': 'Cambodia'}, {'CountryName': 'Canada'}, {'CountryName': 'Central African'}, {'CountryName': 'Denmark'}, {'CountryName': 'Indonesia'}, {'CountryName': 'India'}, {'CountryName': 'Pakistan'}, {'CountryName': 'Malaysia'}, {'CountryName': 'Romania'}, {'CountryName': 'Taiwan'} ];
});
</script>
</head>
<body ng-controller="CountriesCon">
Filter for Countries: <input ng-model="query">
<ul>
<li ng-repeat="Country in Countries | filter:query">{{Country.CountryName}}</li>
</ul>
</body>
</html>
AngularJS Built-in Filters
Filter – Filter the array to a subset of it based on provided criteria.
Uppercase – Convert the text to upper case text.
Lowercase – Convert the text to lower case text.
Currency – Formats the text in a currency format.
Order By – Order the array based on provided criteria.
Date – Format the date to a specific format.
Number – Format the number to a string format.
Filters to an expression
Example to add Filter in AngularJS expression.
<div ng-app="myApp" ng-controller="nameCtrl">
<p>Last name is {{ lastName | lowercase }}</p>
</div>
Filters to Directives
Example to add Filter in AngularJS Custom Directives.
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat=” x in names | orderBy: ‘country’ “>
{{ x.name + ‘, ’ + x.country}}</li>
</ul>
</div>
Filters in controllers
Example to injecting Filter to AngularJS Controller.
myApp.controller("myController",function($scope,$filter){
$scope.filterPhone = $filter('convertToPhone')('1234567890');
});
Filters in Factory
Example of injecting Filter to Factory.
myApp.factory("myCustomService",function($filter){
return{
filteredData: $filter('uppercase')('mishra'),
};
});
Filters in Services
Example to injecting Filter to Service.
myApp.service('myCustomeService',function($filter){
this.filterData = $filter('uppercase')('john');
});
Example of built-in Filters
We can also create custom filter to display our data in a particular way that we want. Using .filter method we can create custom filters in Angular JS. Look at the example below.
<!DOCTYPE html>
<html>
<head>
<title>Using AngularJS Filters</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS demo Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>First Name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>
<tr>
<td>Fees: </td>
<td><input type = "text" ng-model = "student.fees"></td>
</tr>
<tr>
<td>Subject: </td>
<td><input type = "text" ng-model = "subjectName"></td>
</tr>
</table>
<br/>
<table border = "0">
<tr>
<td>Name in Upper Case: </td>
<td>{{student.fullName() | uppercase}}</td>
</tr>
<tr>
<td>Name in Lower Case: </td>
<td>
{{student.fullName() | lowercase}}
</td>
</tr>
<tr>
<td>fees: </td>
<td>
{{student.fees | currency}}
</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<ul>
<li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "David",
lastName: "Beckham",
fees: 1000,
subjects: [
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Maths',marks:65}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>
