Question

当我使用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>

当我尝试将货币过滤器应用于输入字段时，它不起作用。请让我知道如何将货币过滤器应用于输入字段。谢谢

Answer 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));
            });
        }
    };
}]);

Answer 2

很遗憾，您无法使用ng-model进行格式化。至少不那样。您将需要创建自己的指令来实现解析器和格式化程序。 Here is a similar question

我们当前有一个非常好的指示：ngmodel-format

Answer 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>

Answer 4

我认为您不需要在输入中应用过滤器，因为在您的输入中您不需要格式化货币，请查看此页面https://docs.angularjs.org/api/ng/filter/currency这是角度货币过滤器的官方帮助。

如果您使用的是bootstrap，则可以使用其中一个控件http://getbootstrap.com/components/#input-groups-basic 我希望这有帮助。

Answer 5

您可以创建指令并在值上应用格式，而在模糊时可以将格式值设置为输入。

<input format-currency amount="amount">


angular.module('app', [])
.controller('myCtrl', function($scope) {
  $scope.amount = 2;
})
.directive('formatToCurrency', function($filter){
return {
scope: {
  amount  : '='
},
link: function(scope, el, attrs){
  el.val($filter('currency')(scope.amount));

  el.bind('focus', function(){
    el.val(scope.amount);
  });

  el.bind('input', function(){
    scope.amount = el.val();
    scope.$apply();
  });

  el.bind('blur', function(){
    el.val($filter('currency')(scope.amount));
  });
  }
}
});

链接http://jsfiddle.net/moL8ztrw/3/

Answer 6

我发现ng-currency非常适合货币输入，因为它支持小数和基于语言环境的数千个分隔符，并且允许可变数量的十进制数字。

<input type="text" model="yourModel" ng-currency />

Answer 7

安装-货币格式

$ npm i mat-currency-format

说明该指令可以在html输入中使用，以自动将输入更改为区域设置货币。

Demo

<input type="text"
      mvndrMatCurrencyFormat
      [allowNegative]="false"
      [currencyCode]="'USD'"
      [value]="usAmount"
      (blur)="updateUSAmount($event)" />

希望这会有所帮助，干杯！

Answer 8

我写了这个指令，它帮助我格式化货币值。我希望它有所帮助。

.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;
                }
            });
        }
    };
});

将货币过滤器应用于angularjs中的输入字段

8 个答案: