Question

我正在使用＆＃34;最佳答案＆＃34;中显示的货币过滤器在这个帖子中：Apply currency filter to the input field in angularjs

问题是，我还需要输入字段只是数字，即type =＆＃34; number＆＃34;。它与type =＆＃34; text＆＃34;完美配合，但当我尝试将两者结合使用时，当文本框失去焦点时，输入会消失。

<div class="table-cell">
    <div class="field-label table-cell">Estimated Yearly<br />Savings</div>
    <input ng-model="model.yearlySavings" type="number" format="currency">
</div>

JS：

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

注意：我会在那个帖子中评论，但我没有足够的＆＃34; rep＆＃34;发表评论...

Answer 1

我最终使用来自另一个SO线程的自定义格式化程序：AngularJS - How to apply currency filter on textbox as I type?

该指令名为fcsa-number：https://github.com/FCSAmericaDev/angular-fcsa-number

这需要一些技巧，但我得到了这样的工作：

<input ng-model="model.yearlySavings" name="ys" type="text" 
    ng-class="{ 'error': formName.ys.$invalid }" fcsa-number="{ prepend: '$', preventInvalidInput: true, maxDecimals: 2 }">

＆＃34; ng-class＆＃34;当列出的元素（在这种情况下＆＃34; annualSavings＆＃34; aka＆＃34; ys＆＃34;）无效时，bit用于动态地将边框样式设置为红色。在这个例子中，它使用＆＃34; $＆＃34;预先输入我的输入，它可以防止输入无效输入（如常规文本字符），并将最大小数设置为2.奇怪的是，它没有防止像我期望的那样输入3+小数（比如常规文本字符），但是它会使超过2的元素无效。

Answer 2

创建指令如下

HTML

  <div ng-app="myApp">
    <div ng-controller="myCtrl">
      {{amount}}
      <input format-to-currency amount="amount">
    </div>
  </div>

JS

  angular.module('myApp', [])
    .controller('myCtrl', function($scope) {
      $scope.ampunt = 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/7/

在AngularJS中的数字输入上使用自定义货币字段

2 个答案: