Skip to content

Instantly share code, notes, and snippets.

@jeffjohnson9046
Last active September 4, 2020 23:25
Show Gist options
  • Save jeffjohnson9046/9470800 to your computer and use it in GitHub Desktop.
Save jeffjohnson9046/9470800 to your computer and use it in GitHub Desktop.
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>
Copy link

ghost commented Jul 13, 2018

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

@parjun
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) + '%'; }; }]);

@richie50
Copy link

richie50 commented Sep 4, 2020

This solution taught me what i need to know about pipes AKA filters. Jeez!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment