Применить валютный фильтр к полю ввода в angularjs

Привет, когда я использую теги span, я могу применить фильтр денег, например

<div ng-repeat="item in items">
    <span>
        {{item.cost | currency}}
    </span>
</div>

Мне интересно, как я могу применить тот же фильтр валют в теге ввода. то есть

<div ng-repeat="item in items">
    <input type="text"  ng-model="item.cost | currency" />
</div>

Когда я пытаюсь применить фильтр валют к полю ввода, как указано выше, он не работает. Пожалуйста, дайте мне знать, как применить фильтр валют к поля ввода. Спасибо

Ответы

Ответ 1

Я создал простую директиву, которая обрабатывает поля ввода форматирования. Вот пример jsfiddle. Чтобы использовать его, добавьте это в свой существующий код.

<div ng-repeate="item in items">
    <input type="text"  ng-model="item.cost" format="currency" />
</div>

И добавьте эту директиву в свой код.

// allow you to format a text input field.
// <input type="text" ng-model="test" format="number" />
// <input type="text" ng-model="test" format="currency" />
.directive('format', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue)
            });

            elem.bind('blur', function(event) {
                var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, '');
                elem.val($filter(attrs.format)(plainNumber));
            });
        }
    };
}]);

Ответ 2

К сожалению, вы не можете форматировать, используя ng-model. По крайней мере, не так. Вам нужно будет создать свою собственную директиву, которая реализует синтаксический анализатор и форматировщик. Вот аналогичный вопрос.

Существует довольно хорошая директива, которая существует в настоящее время: ngmodel-format

Ответ 3

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example52-production</title>


       <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>



      </head>
      <body ng-app="">
         <script>
    function Ctrl($scope) {
      $scope.amount = 1234.56;
    }
       </script>
      <div ng-controller="Ctrl">
      <input type="number" ng-model="amount"> <br>
      default currency symbol ($): <span id="currency-default">{{amount | currency}}</span>             <br>
      custom currency identifier (USD$): <span>{{amount | currency:"USD$"}}</span>
       </div>
       </body>
      </html>

Ответ 4

Я думаю, что вам не нужно применять фильтр на вашем входе, потому что на вашем входе вам не нужна сформированная валюта, посмотрите на эту страницу https://docs.angularjs.org/api/ng/filter/currency, это официальная помощь для фильтра валюты angular.

Если вы используете bootstrap, вы можете использовать один из этих элементов управления http://getbootstrap.com/components/#input-groups-basic Я надеюсь, что эта помощь.

Ответ 5

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

.directive('numericOnly', function(){
    return {

        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {

            var regex = /^[1-9]\d*(((.\d{3}){1})?(\,\d{0,2})?)$/;
            modelCtrl.$parsers.push(function (inputValue) {

                var transformedInput = inputValue;
                if (regex.test(transformedInput)) {

                    console.log('passed the expression...');
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                    return transformedInput;
                } else {

                    console.log('did not pass the expression...');
                    transformedInput = transformedInput.substr(0, transformedInput.length-1);
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                    return transformedInput;
                }
            });
        }
    };
});