Angular Custom Filters


The custom filters is a filter that allow you to create your own custom filters (
like number, date and currency etc.) logic with help of your own array expressions.  

The custom filters syntax:-

The 
custom currency filter:-  {{ salary |currency:"$"}}

The custom date filter:-   {{date |date:"yyyy-MM-dd HH:mm:ss Z"}}
The custom number filter:- {{ numberExpressions | number : fraction_Size}}

You can see the above format filters example in details.

<!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,

About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book