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

一尘不染

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

angularjs

我看到了这个解决方案 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模型的价值。

也许已经有一个内置的百分比格式化程序？我也想要货币格式化程序，或者用逗号分隔的数字。

阅读 230

2020-07-04

共1个答案

一尘不染

该小提琴不适用于当前的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

2020-07-04