Question

我需要输入框来显示基于用户的语言环境格式化的值，但模型必须将值存储在en-US语言环境中，所有这些都在模糊时发生。当用户点击它们时，我已经得到了字段的格式，但我无法弄清楚如何设置模型值。在我的代码中，formatedValue正在设置正确，供用户查看，但如何将模型值更新为＆＃34; valueToFormat＆＃34;？我试过了

scope.$modelValue = valueToFormat;

并且在通过调试器观察时它起作用，但是一旦呈现视图，该值将恢复为$ viewValue。我怎么能做到这一点？

element.bind('blur', function () {
                var val = ctrl.$modelValue;
                parse(val);
            })

ctrl.$formatters.push(function(value) {
                if(!value) {
                    return value;
                }

                var valueToFormat = getActualValue(value, decimalDelimiter, thousandsDelimiter, decimals, '%') || '0';
                return viewMask.apply(prepareNumberToFormatter(valueToFormat, decimals));
            });

function parse(value) {
                if(!value) {
                    return value;
                }

                var valueToFormat = getActualValue(value, decimalDelimiter, thousandsDelimiter, decimals) || '0';
                var formatedValue = viewMask.apply(prepareNumberToFormatter(valueToFormat, decimals));
                var actualNumber = parseFloat(modelMask.apply(valueToFormat));

                ctrl.$viewValue = formatedValue;
                ctrl.$render();

                return valueToFormat;
            }

Answer 1

您应该能够使用过滤器来解决此问题。例如，这是我们使用的日期过滤器。这是使用打字稿，所以对于直接的java脚本来说，需要稍微调整一下，但它可以解决这个问题。

app.filter('MyDateFilter', ['$filter', function ($filter: ng.IFilterService)
        {
            return function (value:any, format)
            {
                if (typeof value == "string")
                {
                    var stringValue = <string>value;
                    //If there is no / or - then assume its not a date
                    if (stringValue.indexOf('/') == -1 && stringValue.indexOf('-') == -1)
                        return value;
                }
                var parsedDate = Date.parse(value);
                if (isNaN(parsedDate))
                    return value;
                else
                    return $filter('date')(value, format);
            }
        }]);

然后在html中。

<div ng-repeat="value in values" >
     {{value  |  MyDateFilter:"MM/dd/yyyy" }}
 </div>

因为您似乎想要更改输入显示值。这是我们用于此的解决方案。我创建了一个自定义指令，在那里你可以操作$ render。所以：

 app.directive("myDateDisplayInput", ['$filter', function DatepickerDirective(filter: ng.IFilterService): ng.IDirective
        {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: (scope: ng.IScope, element, attrs, ngModelCtrl: ng.INgModelController) =>
                {


ngModelCtrl.$render = () => 
            {
                var date = ngModelCtrl.$modelValue ?
                    filter('date')(ngModelCtrl.$modelValue, "MM/dd/yyyy") :
                    ngModelCtrl.$viewValue;

                jqueryElement.val(date);
            };

}
                };
            }

这会将值格式化为您想要的值。如果您只想在模糊时发生这种情况，那么您可以添加

 ng-model-options="{ updateOn: 'blur' }"

<input type="text" my-date-display-input  ng-model-options="{ updateOn: 'blur' }" ng-model="unformattedDate"/>

有些作品可能会丢失，但这应该可以解决这个问题。

使用格式化值更新视图，使用数值模型

1 个答案: