The formatting filters are custom filters like number, date and currency etc. That concept is called formatting filter.
When I needed, I customize the
filters like date, number and currency etc.
The formatting filters syntax:-
1. The currency : {{ salary |currency:"$"}}
2. The date : {{date |date:"yyyy-MM-dd HH:mm:ss Z"}}
3. The number : {{ numberExpressions | number : fraction_Size}}
The formatting filters example
code as given in detail using the currency.
//HTML code sample as given below. <div ng-app="filtersApp"> <div> <h1>Formatting Filters</h1> </div> <div ng-controller="filtersCtrl"> <h4>{{salary | fraction_Currency }} AND {{-salary | fraction_Currency}}</h4> <h4>{{salary | currency }} AND {{-salary | currency }}</h4> </div> </div> //AngularJs code sample as given below. var app = angular.module('filtersApp', []); app.controller('filtersCtrl', function ($scope) { $scope.salary = 15000; }); app.filter('fraction_Currency', ['$filter', '$locale', function (filter, locale) { var currency_Filters = filter('currency'); var decimalFormat = locale.NUMBER_FORMATS; return function (amountVal, currencyType) { var currencyValue = currency_Filters(amountVal, currencyType); var result = currencyValue.indexOf(decimalFormat.DECIMAL_SEP); if (amountVal >= 0) { return currencyValue.substring(0, result); } else { return currencyValue.substring(0, result) + ')'; } }; } ]); //The full example code with live demo as given below. <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>Formatting Filters</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <script> var app = angular.module('filtersApp', []); app.controller('filtersCtrl', function ($scope) { $scope.salary = 15000; }); app.filter('fraction_Currency', ['$filter', '$locale', function (filter, locale) { var currency_Filters = filter('currency'); var decimalFormat = locale.NUMBER_FORMATS; return function (amountVal, currencyType) { var currencyValue = currency_Filters(amountVal, currencyType); var result = currencyValue.indexOf(decimalFormat.DECIMAL_SEP); if (amountVal >= 0) { return currencyValue.substring(0, result); } else { return currencyValue.substring(0, result) + ')'; } }; } ]); </script> </head> <body ng-app="filtersApp"> <div> <h1>Formatting Filters</h1> </div> <div ng-controller="filtersCtrl"> <h4>{{salary | fraction_Currency }} AND {{-salary | fraction_Currency}}</h4> <h4>{{salary | currency }} AND {{-salary | currency }}</h4> </div> </body> </html>
The output as below,
Blogger Comment
Facebook Comment