如何使百分比格式的输入在最新的AngularJS上工作？

Question

我看到了这个解决方案http://jsfiddle.net/gronky/GnTDJ/并且它有效.也就是说,当您输入25时,它将被推回模型为0.25

HTML:

<script type="text/javascript" ng:autobind
        src="http://code.angularjs.org/0.9.17/angular-0.9.17.js"></script>
<script>
function Main() {
    this.var = '1.0000';
}
</script>
<div ng:controller="Main">
    <input type="text" name="var" ng:format="percent">
    <pre>var = {{var|json}}</pre>
</div>?

JavaScript的:

angular.formatter('percent', {
  parse: function(value) {
    var m = value.match(/^(\d+)\/(\d+)/);
    if (m != null)
      return angular.filter.number(parseInt(m[1])/parseInt(m[2]), 2);
    return angular.filter.number(parseFloat(value)/100, 2);
  },
  format: function(value) {
    return angular.filter.number(parseFloat(value)*100, 0);
  },
});
?

我试着让它在最新的AngularJS上运行,它不再工作了虽然http://jsfiddle.net/TrJcB/也就是说,当你输入25时,它也被推回25,它也没有推动正确的0.25对模型的价值.

或者可能已经有百分比的内置格式化程序？我也想要货币格式化程序,或者逗号分隔数字.

Answer 1

实现百分比过滤器的另一种方法(使用angular#~1.2):

angular.module('moduleName')
.filter('percentage', ['$filter', function($filter) {
    return function(input, decimals) {
        return $filter('number')(input*100, decimals)+'%';
    };
}]);

如何使用它:

<span>{{someNumber | percentage:2}}</span>

Answer 2

这个小提琴不适用于当前的Angular版本,因为之后有很多API发生了变化.angular.formatter不再可用,也不是angular.filter.

现在编写它的方法是使用指令并在指令控制器上使用$parser和$formatter使用.所以你的链接功能看起来像

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);
            }
        );
      }

此外,现在可以通过$filter服务访问过滤器.您可以在此处找到文档:https://docs.angularjs.org/api/ng/filter/number

更新了原始示例的小提琴:http://jsfiddle.net/abhaga/DdeCZ/18/

货币过滤器已经有角度:https://docs.angularjs.org/api/ng/filter/currency