Question

我有一个使用ng-pattern的输入：

<input type="text" min="0" ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" ng-model="payment.amount" />

但是，如果我尝试在范围内更改我的payment.amount，请执行以下操作：

$scope.payment.amount = 150.5;

无法绑定。注意正则表达式 - 如果金额有小数位，则必须包含两位数。如果没有，则验证失败。

见强制性的掠夺者：http://plnkr.co/edit/TIltn1NEHdN3so6GnTQi?p=preview

问题：如何才能正确绑定，最好在数字末尾加0？

Answer 1

根据提供的评论，我最终编写了一个自定义指令。该指令适用于我的特定情况，但我不确定它是否适合其他任何人。它只是将任何模型值格式化为带有两位十进制数的数字，如果输入的值为NaN，则将0应用于模型。（是的，它完全依赖于模型变量是某种可解析的数字，但这是一个快速的肮脏修复。）

angular.module("app").directive('formatNumber', function ($timeout) {
    return {
        require: '?ngModel',
        scope: {
            bindModel: '=ngModel'
        },
        link: function (scope, element, attr, ngModel) {
            ngModel.$formatters.push(function (v) {
                return parseFloat(ngModel.$modelValue).toFixed(2);
            });

            ngModel.$parsers.push(function (v) {
                var presumedVal = parseFloat(ngModel.$viewValue);
                if (_.isNaN(presumedVal)) {
                    return 0;
                }
                return presumedVal;
            });
        }
    };
});

以下是指示的输入模型：

<input type="text" min="0" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" ng-model="payment.JCPendingPaymentAmount" />

角度ng模式防止绑定值

1 个答案: