Solved

Custom filter using  AngularJS

Posted on 2014-02-26
3
801 Views
Last Modified: 2014-02-26
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
0
Comment
Question by:ksd123
3 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 150 total points
ID: 39890741
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) + "%"; }
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 150 total points
ID: 39890874
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

0
 

Author Closing Comment

by:ksd123
ID: 39891143
Thank you guys
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now