How to make a percent formatted input work on latest AngularJS?
The fiddle doesn't work with current Angular version since quite a few APIs have changed since. angular.formatter
is no longer available and neither is angular.filter
.
The way to write it now is to use a directive and make use of $parser
and $formatter
available on the directive controller. So your link function will look something like
link: function(scope, ele, attr, ctrl){
ctrl.$parsers.unshift(
function(viewValue){
return $filter('number')(parseFloat(viewValue)/100, 2);
}
);
ctrl.$formatters.unshift(
function(modelValue){
return $filter('number')(parseFloat(modelValue)*100, 2);
}
);
}
Also the filters are now accessed through $filter
service. You can find the documentation here: https://docs.angularjs.org/api/ng/filter/number
Updated fiddle for the original example: http://jsfiddle.net/abhaga/DdeCZ/18/
Currency filter is already available in angular: https://docs.angularjs.org/api/ng/filter/currency
Another way to implement percentage filter (works with angular#~1.2):
angular.module('moduleName')
.filter('percentage', ['$filter', function($filter) {
return function(input, decimals) {
return $filter('number')(input*100, decimals)+'%';
};
}]);
How to use it:
<span>{{someNumber | percentage:2}}</span>