Обновить представление с отформатированным значением, модель с числовым значением

Question

У меня есть необходимость в вводах для отображения значений, отформатированных на основе пользовательской локали, но модель должна хранить значение в локали en-US, и все это происходит при размытии. У меня есть форматирование полей, работающих, когда пользователь щелкает их, но я не могу понять, как установить значение модели. В моем коде formatedValue правильно настроен для просмотра пользователем, но как мне изменить значение модели как «valueToFormat»? Я попытался

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"/> 

Возможно, некоторые части могут отсутствовать, но это должно понять идею.