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

【问题标题】：Apply currency filter to the input field in angularjs将货币过滤器应用于angularjs中的输入字段
【发布时间】：2014-07-07 16:31:43
【问题描述】：

嗨，当我使用跨度标签时，我可以应用货币过滤器，例如

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

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

【问题讨论】：

查看这个答案：stackoverflow.com/questions/19890364/…
docs.angularjs.org/api/ng/filter/currency
这是我找到的最好的库。它在输入未聚焦时显示为货币，在聚焦时转换为数字，优雅地处理几个非数字字符，并将底层ng-model-bound 属性始终保持为number 类型。 npmjs.com/package/ng-input-currency

标签： javascript jquery angularjs

【解决方案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));
            });
        }
    };
}]);

【讨论】：

但是模型值受到影响，不是数字，是格式化字符串
我将这一行 return $filter(attrs.format)(ctrl.$modelValue) 更改为 return $filter(attrs.format)(ctrl.$modelValue, attrs.format == 'currency' ? '€' : null) 以添加 € 符号而不是默认的 $。
@NVO 我已将 return $filter(attrs.format)(ctrl.$modelValue) 更改为 return $filter(attrs.format)(ctrl.$modelValue, attrs.format == 'currency' ? '€' : null) 但它仍然显示 '$' 符号

【解决方案2】：

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

目前我们那里有一个非常好的指令：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这是角度货币过滤器的官方帮助。

如果您使用的是引导程序，则可以使用这些控件之一http://getbootstrap.com/components/#input-groups-basic 我希望这会有所帮助。

【讨论】：

【解决方案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/

【讨论】：

【解决方案6】：

安装 - 货币格式

$ npm i mat-currency-format

说明该指令可用于 html 输入以自动将输入更改为语言环境货币。

Demo

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

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

【讨论】：

【解决方案7】：

我发现ng-currency 非常适合用于货币输入。它支持基于语言环境的小数和千位分隔符，并允许使用可变数量的小数。

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

【讨论】：

【解决方案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;
                }
            });
        }
    };
});

【讨论】：

这只是检查输入是否都是不允许其他字符的数字。代码中没有货币。