Формат <input> для отображения валюты как пользовательских типов

Question

Я ищу способ форматирования элемента input для форматирования валюты. В частности, я хочу, чтобы запятые там были тысячами.

Исходным решением было просто форматировать значение в контроллере и вернуть его в представление. Но затем, чтобы сделать мои расчеты, я должен все это удалить. Затем я наткнулся на $formatters и $parsers для ngModelController. По сути, это позволяет создавать функции конвейера. Первый форматирует значение для пользователя. Второй анализирует значение, которое будет использоваться в контроллере. Именно то, что я хочу.

Мое решение работает только на странице. Check out my fiddle.

myApp.directive('thousandsformatter', function ($filter) { 
    return { 
     require: 'ngModel', 
     link: function (scope, element, attrs, ctrl) { 
      ctrl.$formatters.push(function (data) { 
       var formatted = $filter('currency')(data); 
       console.log(formatted); 
       //convert data from model format to view format 
       return formatted; //converted 
      }); 
      ctrl.$parsers.push(function (data) { 
       console.log(data); 
       //convert data from view format to model format 
       return data; //converted 
      }); 
     } 
    }; 
}); 

Как я могу получить это обновление как типы пользователей?

Answer 1

Я сделал настройку в функции синтаксического анализа, и теперь она работает так, как вы хотите.

myApp.directive('thousandsformatter', function ($filter) { 
    var precision = 2; 
    return { 
     require: 'ngModel', 
     link: function (scope, element, attrs, ctrl) { 
      ctrl.$formatters.push(function (data) { 
       var formatted = $filter('currency')(data); 
       console.log(formatted); 
       //convert data from model format to view format 
       return formatted; //converted 
      }); 
      ctrl.$parsers.push(function (data) { 
       var plainNumber = data.replace(/[^\d|\-+|\+]/g, ''); 
       var length = plainNumber.length; 
       var intValue = plainNumber.substring(0,length-precision); 
       var decimalValue = plainNumber.substring(length-precision,length) 
       var plainNumberWithDecimal = intValue + '.' + decimalValue; 
       //convert data from view format to model format 
       var formatted = $filter('currency')(plainNumberWithDecimal); 
       element.val(formatted); 

       return Number(plainNumberWithDecimal); 
      }); 
     } 
    }; 
}); 

Check out my solution on fiddle.

Надеюсь, что это поможет.

Cheers