How to use filter within controllers in AngularJS ?
Filters are used to format the value of an expression and display to the user. It can be used in HTML Previews, Controllers or Services, and directives. AngularJS has many built-in filters, but we can easily define our own filter.
Built-in filters:
- AngularJS filter Filter:
- AngularJS currency Filter:
- AngularJS number Filter:
- AngularJS date Filter:
- AngularJS json Filter:
- AngularJS lowercase Filter
- AngularJS uppercase Filter:
- AngularJS limitTo Filter
- AngularJS orderBy Filter
If a filter currency is injected by using the dependency currencyFilter. The injected argument is a function that takes the value to format as the first argument and filter parameters starting with the second argument. The following ways are used to implement the filter.
Approach 1: Using filters in view templates
Syntax:
- By applying the Filters to expressions in view templates:
{{ expression | filter }}
- Filters can be applied to the result of another filter. It is called “chaining”:
{{ expression | filter1 | filter2 | ... }}
- Filters may have arguments:
{{ expression | filter:argument1:argument2:... }}
Program:
<!DOCTYPE html> < html > < head > < script src = </ script > </ head > < body > < div ng-app = "app1" ng-controller = "currencyCtrl" > < h1 >Price: {{ price | currency }}</ h1 > </ div > < script > var app = angular.module('app1', []); app.controller('currencyCtrl', function($scope) { $scope.price = 100; }); </ script > < p > The currency filter formats a number to a currency format. </ p > </ body > </ html > |
Output:
Approach 2: The filter is used in directives, services, and controllers. To achieve this, inject a dependency with the name of filter into your directive/controller/service.
Program:
<script> var listedItems = [ { itemID: 001, itemName: "Laptop" , stockLeft: 1 }, { itemID: 002, itemName: "Cell Phone" , stockLeft: 3 }, { itemID: 003, itemName: "Earphones" , stockLeft: 0 }, { itemID: 004, itemName: "Chargers" , stockLeft: 5 }, { itemID: 005, itemName: "Headphones" , stockLeft: 0 }, { itemID: 006, itemName: "USB Cables" , stockLeft: 15} ]; listedItems = listedItems.filter( function (item) { return (item.stockLeft > 0); }); // This will display the no of items are in stock prompt( "" , "There are " + listedItems.length + " items left in shop." ); </script> |
Output:
Approach 3: It is the modification of the second approach. Filters can also be added to AngularJS to format data values. There is $filter service which is used in our AngularJS controller. In AngularJS, you can also inject the $filter service within the controller and can use it with the following syntax for filter.
Syntax:
$filter("filter")(array, expression, compare, propertyKey) function myCtrl($scope, $filter) { $scope.finalResult = $filter("filter")( $scope.objArray, $scope.searchObj); };
- AngularJS has some built-in filters that can be used to reduce an array’s execution or array at some points based on some condition.
$scope.formatDate = $filter("date")($scope.date, "yyyy-MM-dd"); $scope.finalResult = $filter('uppercase')($scope.name);
Program: Filters are added to directives, like ng-repeat, by using the pipe symbol or character `|`, followed by a filter tag.
<!DOCTYPE html> < html > < head > < script src = </ script > </ head > < body > < div ng-app = "app1" ng-controller = "piprCtrl" > < p > Looping with obj object created for nameList array: </ p > < ul > < li ng-repeat = "obj in nameList | orderBy:'city'" > {{ obj.name + ', ' + obj.city }} </ li > </ ul > </ div > < script > angular.module("app1", []).controller( "piprCtrl", function($scope) { $scope.nameList = [{ name: "Hardik", city: "Chandigarh" }, { name: "Shekhar", city: "Dehradun" }, { name: "Sanyam", city: "Chandigarh" }, { name: "Poojan", city: "Dehradun" }, { name: "Aman", city: "Muzaffarnagar" }, { name: "Shashank", city: "Roorkee" }, { name: "Shazi", city: "Lucknow" }, { name: "Harshit", city: "Dehradun" }, { name: "Abhishek", city: "Gangoh" }]; }); </ script > </ body > </ html > |
Output: