Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Format percentages in AngularJS
// In app.js or main.js or whatever:
// var myApp = angular.module('askchisne', ['ngSanitize', 'ngAnimate', 'ui.bootstrap', 'ui.bootstrap.tpls']);
// This filter makes the assumption that the input will be in decimal form (i.e. 17% is 0.17).
myApp.filter('percentage', ['$filter', function ($filter) {
return function (input, decimals) {
return $filter('number')(input * 100, decimals) + '%';
};
}]);
// Usage:
<tr ng-repeat="i in items">
<td>{{i.statistic | percentage:2}}</td>
</tr>
@governmentSponsored

This comment has been minimized.

Copy link

governmentSponsored commented Oct 16, 2014

works like a charm! thank you.

@dumorango

This comment has been minimized.

Copy link

dumorango commented Oct 31, 2014

Thank You. Worked just fine!

@motomickd

This comment has been minimized.

Copy link

motomickd commented Jan 27, 2015

Awesome! just what I needed. saved me time.

@TomerW

This comment has been minimized.

Copy link

TomerW commented Feb 6, 2015

nice, but i suggest a more 'built-in' approach:
{{val * 100| number :1 }}%
docs for number filter @ https://docs.angularjs.org/api/ng/filter/number

@anilsingh581

This comment has been minimized.

Copy link

anilsingh581 commented Mar 26, 2015

@rockwotj

This comment has been minimized.

Copy link

rockwotj commented Apr 21, 2015

Thanks!

@eddieebeling

This comment has been minimized.

Copy link

eddieebeling commented Jun 12, 2015

Any way you could update this to hide the decimal zero?

@ghost

This comment has been minimized.

Copy link

ghost commented Jun 25, 2015

Works great!

@punkrockpolly

This comment has been minimized.

Copy link

punkrockpolly commented Jul 30, 2015

👍 🚀

@e-stylzz

This comment has been minimized.

Copy link

e-stylzz commented Oct 5, 2015

Thanks!

@gpkarma

This comment has been minimized.

Copy link

gpkarma commented Dec 10, 2015

If I wanted to put this inline as in:

cellFilter: $filter(''number')(input * 100, decimals) + '%';

... if I put it inline, what would I put instead of 'input'? I am getting an error this way, & trying to inject the custom filter is not working for me right now for some reason.

@maniart

This comment has been minimized.

Copy link

maniart commented Dec 10, 2015

thanks for sharing this. 👍

@witnes

This comment has been minimized.

Copy link

witnes commented Jan 25, 2016

thanks for working example

@SakthiSureshAnand

This comment has been minimized.

Copy link

SakthiSureshAnand commented Feb 24, 2016

@jeffjohnson9046 In my project I have the same code what you have posted above , I confused on the
return function (input, decimals) { return $filter('number')(input * 100, decimals) + '%'; };
My question , where is the data comes from input , for my case in my jade like this
td(style='text-align: right', ng-show='view.showHistory') span(ng-bind='x.recentScore | percentage:0') trend-arrow(b='x.pastScore', a='x.recentScore')

I dont get any Clue where they assigned input value ? Please guide me.

@moshfeu

This comment has been minimized.

Copy link

moshfeu commented Mar 17, 2016

Thanks!

@jensenkd

This comment has been minimized.

Copy link

jensenkd commented Jul 19, 2016

thanks!

@christrotter89

This comment has been minimized.

Copy link

christrotter89 commented Aug 1, 2016

Thanks for this.

@thorne51

This comment has been minimized.

Copy link

thorne51 commented Jan 17, 2017

Awesome! How do you apply this to an input tag though? I only need to put a '%' suffix in the input but read the numeric value in the model?

@ffradegrada

This comment has been minimized.

Copy link

ffradegrada commented Feb 23, 2017

Thank you!

@ArpanTanna

This comment has been minimized.

Copy link

ArpanTanna commented Mar 15, 2017

Works like charm...
Thanks!!!

@LahiruDhananjaya

This comment has been minimized.

Copy link

LahiruDhananjaya commented Jul 10, 2017

i need to add decimal point with dot (.) or comma (,) separator.how could anyone find a way to solve the problem.

@jamespsterling

This comment has been minimized.

Copy link

jamespsterling commented Aug 29, 2017

Useful, thanks!

@felixfrtz

This comment has been minimized.

Copy link

felixfrtz commented Dec 13, 2017

Awesome, thanks!

@ibs4lif

This comment has been minimized.

Copy link

ibs4lif commented Dec 14, 2017

Thanks

@Miqueliu

This comment has been minimized.

Copy link

Miqueliu commented Jul 13, 2018

@LahiruDhananjaya, you only have to use i18n and l10n.

@parjun

This comment has been minimized.

Copy link

parjun commented Feb 21, 2019

nice.
Adding a check for the decimal and default it to 2 is a better addition. In most cases, percentages are represented in 2 decimals.

myApp.filter('percentage', ['$filter', function ($filter) { return function (input, decimals) { if (typeof decimals === "undefined") { decimals = 2; } return $filter('number')(input * 100, decimals) + '%'; }; }]);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.