angularjs - 使用 AngularJS 指令格式化输入字段，同时保持范围变量不变

Question

我在格式化输入字段时遇到问题，而底层范围变量未格式化。

我想要实现的是一个显示货币的文本字段。它应该在处理错误输入时即时格式化自己。我得到了这个工作，但我的问题是我想将非格式化值存储在我的范围变量中。输入的问题在于它需要一个双向的模型，因此更改输入字段会更新模型，反之亦然。

我遇到$parsers了$formatters这似乎是我正在寻找的。不幸的是，它们并没有相互影响（这实际上可能有助于避免无限循环）。

我创建了一个简单的 jsFiddle：http: //jsfiddle.net/cruckie/yE8Yj/，代码如下：

HTML：

<div data-ng-app="app" data-ng-controller="Ctrl">
    <input type="text" data-currency="" data-ng-model="data" />
    <div>Model: {{data}}</div>
</div>

JS：

var app = angular.module("app", []);

function Ctrl($scope) {
    $scope.data = 1234567;
}

app.directive('currency', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {

            ctrl.$formatters.push(function(modelValue) {
                return modelValue.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
            });

            ctrl.$parsers.push(function(viewValue) {
                return parseFloat(viewValue.replace(new RegExp(",", "g"), ''));
            });
        }
    };
});

同样，这只是一个简单的例子。当它加载时，一切看起来都像它应该的那样。输入字段已格式化，变量未格式化。但是，当更改输入字段中的值时，它不再格式化自身 - 但是变量会正确更新。

有没有办法确保文本字段被格式化而变量不是？我想我正在寻找的是文本字段的过滤器，但我看不到任何东西。

此致

score 17 · Accepted Answer

这是一个小提琴，展示了我如何在我的应用程序中实现完全相同的行为。我最终使用了ngModelController#render而不是$formatters，然后添加了一组单独的触发keydown和change事件的行为。

http://jsfiddle.net/KPeBD/2/

score 5 · Accepted Answer

我重构了原始指令，使其使用 $parses 和 $formatters 而不是监听键盘事件。也不需要使用 $browser.defer

请参阅此处的工作演示http://jsfiddle.net/davidvotrubec/ebuqo6Lm/

    var myApp = angular.module('myApp', []);

    myApp.controller('MyCtrl', function($scope) {
      $scope.numericValue = 12345678;
    });

    //Written by David Votrubec from ST-Software.com
    //Inspired by http://jsfiddle.net/KPeBD/2/
    myApp.directive('sgNumberInput', ['$filter', '$locale', function ($filter, $locale) {
            return {
                require: 'ngModel',
                restrict: "A",
                link: function ($scope, element, attrs, ctrl) {
                    var fractionSize = parseInt(attrs['fractionSize']) || 0;
                    var numberFilter = $filter('number');
                    //format the view value
                    ctrl.$formatters.push(function (modelValue) {
                        var retVal = numberFilter(modelValue, fractionSize);
                        var isValid = isNaN(modelValue) == false;
                        ctrl.$setValidity(attrs.name, isValid);
                        return retVal;
                    });
                    //parse user's input
                    ctrl.$parsers.push(function (viewValue) {
                        var caretPosition = getCaretPosition(element[0]), nonNumericCount = countNonNumericChars(viewValue);
                        viewValue = viewValue || '';
                        //Replace all possible group separators
                        var trimmedValue = viewValue.trim().replace(/,/g, '').replace(/`/g, '').replace(/'/g, '').replace(/\u00a0/g, '').replace(/ /g, '');
                        //If numericValue contains more decimal places than is allowed by fractionSize, then numberFilter would round the value up
                        //Thus 123.109 would become 123.11
                        //We do not want that, therefore I strip the extra decimal numbers
                        var separator = $locale.NUMBER_FORMATS.DECIMAL_SEP;
                        var arr = trimmedValue.split(separator);
                        var decimalPlaces = arr[1];
                        if (decimalPlaces != null && decimalPlaces.length > fractionSize) {
                            //Trim extra decimal places
                            decimalPlaces = decimalPlaces.substring(0, fractionSize);
                            trimmedValue = arr[0] + separator + decimalPlaces;
                        }
                        var numericValue = parseFloat(trimmedValue);
                        var isEmpty = numericValue == null || viewValue.trim() === "";
                        var isRequired = attrs.required || false;
                        var isValid = true;
                        if (isEmpty && isRequired) {
                            isValid = false;
                        }
                        if (isEmpty == false && isNaN(numericValue)) {
                            isValid = false;
                        }
                        ctrl.$setValidity(attrs.name, isValid);
                        if (isNaN(numericValue) == false && isValid) {
                            var newViewValue = numberFilter(numericValue, fractionSize);
                            element.val(newViewValue);
                            var newNonNumbericCount = countNonNumericChars(newViewValue);
                            var diff = newNonNumbericCount - nonNumericCount;
                            var newCaretPosition = caretPosition + diff;
                            if (nonNumericCount == 0 && newCaretPosition > 0) {
                                newCaretPosition--;
                            }
                            setCaretPosition(element[0], newCaretPosition);
                        }
                        return isNaN(numericValue) == false ? numericValue : null;
                    });
                } //end of link function
            };
            //#region helper methods
            function getCaretPosition(inputField) {
                // Initialize
                var position = 0;
                // IE Support
                if (document.selection) {
                    inputField.focus();
                    // To get cursor position, get empty selection range
                    var emptySelection = document.selection.createRange();
                    // Move selection start to 0 position
                    emptySelection.moveStart('character', -inputField.value.length);
                    // The caret position is selection length
                    position = emptySelection.text.length;
                }
                else if (inputField.selectionStart || inputField.selectionStart == 0) {
                    position = inputField.selectionStart;
                }
                return position;
            }
            function setCaretPosition(inputElement, position) {
                if (inputElement.createTextRange) {
                    var range = inputElement.createTextRange();
                    range.move('character', position);
                    range.select();
                }
                else {
                    if (inputElement.selectionStart) {
                        inputElement.focus();
                        inputElement.setSelectionRange(position, position);
                    }
                    else {
                        inputElement.focus();
                    }
                }
            }
            function countNonNumericChars(value) {
                return (value.match(/[^a-z0-9]/gi) || []).length;
            }
            //#endregion helper methods
        }]);

Github 代码在这里 [ https://github.com/ST-Software/STAngular/blob/master/src/directives/SgNumberInput]

score 5 · Accepted Answer

我对 Wade Tandy 所做的进行了一些修改，并添加了对几个功能的支持：

千位分隔符取自 $locale
小数点后的位数默认取自 $locale，并且可以被分数属性覆盖
解析器仅在更改时激活，而不是在 keydown、剪切和粘贴时激活，以避免在每次更改时将光标发送到输入的末尾
还允许使用 Home 和 End 键（使用键盘选择整个文本）

当输入不是数字时，将有效性设置为 false，这是在解析器中完成的：

        // This runs when we update the text field
    ngModelCtrl.$parsers.push(function(viewValue) {
        var newVal = viewValue.replace(replaceRegex, '');
        var newValAsNumber = newVal * 1;

        // check if new value is numeric, and set control validity
        if (isNaN(newValAsNumber)){
            ngModelCtrl.$setValidity(ngModelCtrl.$name+'Numeric', false);
        }
        else{
            newVal = newValAsNumber.toFixed(fraction);
            ngModelCtrl.$setValidity(ngModelCtrl.$name+'Numeric', true);
        }
        return newVal;

    });

你可以在这里看到我的修订版 - http://jsfiddle.net/KPeBD/64/

score 3 · Accepted Answer

实际上，正如您所说， $parsersand$formatters是“独立的”（可能是循环，再次如您所说）。在我们的应用程序中，我们使用onchange事件（在link函数内部）显式格式化，大致如下：

element.bind("change", function() {
    ...
    var formattedModel = format(ctrl.$modelValue);
    ...
    element.val(formattedModel);
});

有关详细且有效的示例，请参阅您更新的小提琴：http: //jsfiddle.net/yE8Yj/1/

我喜欢绑定到onchange事件，因为我发现在用户输入时更改输入很烦人。

score 0 · Accepted Answer

小提琴使用的是旧版本的 angular(1.0.7)。

在更新到最新版本 1.2.6 时，ngModelCtrl 的 $render 函数永远不会被调用，这意味着如果模型值在控制器中发生更改，

该数字永远不会按照视图中的要求进行格式化。

//check if new value is numeric, and set control validity
if (isNaN(newValAsNumber)){
  ngModelCtrl.$setValidity(ngModelCtrl.$name+'Numeric', false);
}

这是更新的小提琴http://jsfiddle.net/KPeBD/78/

score 0 · Accepted Answer

根据 Wade Tandy 的回答，这里有一个新的 jsfiddle，具有以下改进：

可能的十进制数
基于本地的千位分隔符和小数分隔符
和其他一些调整...

我也将 all 替换String.replace(regex)为split().join()，因为这允许我在表达式中使用变量。

http://jsfiddle.net/KPeBD/283/

angularjs - 使用 AngularJS 指令格式化输入字段，同时保持范围变量不变

6 回答 6

Related

Reference