Angularjs number $filter 输入指令要求用户按小数点两次答案

【问题标题】：Angularjs number $filter directive on input requires a user to press decimal twiceAngularjs number $filter 输入指令要求用户按小数点两次
【发布时间】：2018-09-05 11:35:10
【问题描述】：

我试图将输入限制为仅除数字和小数之外，将分数大小固定为最大值 2，并用逗号掩盖 viewValue，并将 modelValue 保留为数字。下面的代码几乎可以完美运行，只是为了添加小数，用户必须按两次. 键。有什么想法为什么第一次按下会去掉小数点？

var app = angular.module('myApp', []);
app.controller('pageCtrl', function($scope){
    $scope.myModel = 0;
});

app.directive('formatter', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl || !attrs.formatter) return;
            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.formatter)(ctrl.$modelValue, 2)
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var plainNumber = viewValue.replace(/[^0-9.]/g, '');
                var fractionSize = 0;
                if (plainNumber.indexOf('.') >= 0) {
                    var parts = plainNumber.split('.');
                    fractionSize = parts[1].length > 2 ? 2 : parts[1].length;
                }
                elem.val($filter(attrs.formatter)(plainNumber, fractionSize));

                return plainNumber;
            });
        }
    };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="myApp">
   <div ng-controller="pageCtrl">
      <input formatter="number" ng-model="myModel">
      {{ myModel }}
   </div>
</body>

【问题讨论】：

标签： angularjs angularjs-directive angularjs-filter

【解决方案1】：

这是因为当提供的fractionSize 参数为零时，AngularJS 中的number 过滤器会去除小数。

您可以自己确认：

<!-- 2 -->
{{ 2. | number:0 }}

所以要绕过它，只需有条件地应用number 过滤器：

elem.val(fractionSize ? $filter(attrs.formatter)(plainNumber, fractionSize) : plainNumber);

【讨论】：

唯一的问题是你也失去了逗号格式
这给了我一个想法。三进制中的错误结果只需要检查.，如果它存在，那么只需在末尾连接一个小数...$filter('number')(plainNumber) + '.'