javascript - 为什么过滤器在 Angular 输入字段中不起作用？

我想在输入字段中添加过滤器，但它给出了错误..我想如果我在输入字段中键入1k，它会在输入字段（值）中显示文本1,000。换句话说，如果我键入1k ..它转换1k或删除/将1k更改为1000。

我尝试那样，但不起作用..这是我的代码

http://plnkr.co/edit/6E4pe6RO8WwhINTpEf27?p=preview

.filter('toNumber', function($filter) {

  var numberFilter = $filter('number');

  var dict = {
    k: 1000,
    l: 100000
  };

  var regex = /^([-+]?[0-9]*\.?[0-9]+)([kl])$/;

  return function(val, fraction) {
    var match;
    if(angular.isString(val) && (match = val.match(regex)) ) {
      val = match[1] * dict[match[2]];
    }

    return numberFilter(val, fraction || 0);

  };
});

最佳答案

在您的情况下，您不应该使用过滤器，因为它只是格式化值，而不是更改它。另外，ngModel是双向绑定，仅支持变量影响。

您可以改用指令：

JS（增加了Cameron Morrow建议的改进：）

.directive('toNumber', function(numberFilter) {
    var dict = {
      k: 1000,
      l: 100000
    };

    var regex = /^([-+]?[0-9,]*\.?[0-9]+)([kl])$/;

    return {
      require: 'ngModel',
      link: function link(scope, element, attr, ngModel) {
        scope.$watch(attr.ngModel, function(val) {
          var match;
          if(angular.isString(val) && (match = val.match(regex)) ) {
            val = match[1].replace(/,/g , "") * dict[match[2]];
            scope[attr.ngModel] = numberFilter(val, 0);
          }
        })
      }
    }
})

的HTML

<div ng-controller='cntrl'>
     <input type='text' to-number ng-model='user'>
</div>

关于javascript - 为什么过滤器在 Angular 输入字段中不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35063533/