Angular Formatting Filters

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,

About Blogger

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