Custom filter using  AngularJS

ksd123
ksd123 used Ask the Experts™
on
Hi Experts,

I get a numeric value from a server and would like to format as a percent and display in the UI. How can I do this in Angularjs using custom filter? Here is my requirement

Data from server                     UI  

0                                 should display as NA
0.1234                        should display as 12.34%  //2 decimals
0.05                            should display as  5.00%  //2 decimals
6.24                            should display as  6.24%  

Thanks in Advance
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014
Commented:
Test page : http://jsfiddle.net/ausS4/

var myApp = angular .module("myApp",[]) .controller(myCtrl) .factory("Data", function() { return { get: function() { return [0,0.1234,0.05,6.24]; } } }); var myCtrl = function($scope, Data) { $scope.numbers = []; var data = Data.get(); for(var i=0;i<data.length;i++) { $scope.numbers.push( myFormatter(data[i]) ); } } var myFormatter = function(value) { value = value * 1; if(value == 0) { return "NaN"; } else if(Math.abs(value) > 1) { return value.toFixed(2) + "%"; } return (value * 100).toFixed(2) + "%"; }
Data Scientist
Most Valuable Expert 2014
Commented:
this would be the angular filter way to do it:

angular.module('MyApp').
  filter('toPercent', function() {
    return function (value) {
		if (value == 0) {
		    value = "NA";
		} else if (Math.abs(value) >= 1){
		    value =  (value).toFixed(2) + "%";
                }else{
		    value =  (value *  100).toFixed(2) + "%";
                }
                return value;
    }
  })

Open in new window


then in the template, you can use your filter like this;

{{value|toPercent}}

Open in new window

Author

Commented:
Thank you guys

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial