为什么过滤器不能在角度输入字段中工作?

时间:2016-01-28 13:58:35

标签: javascript angularjs angularjs-directive angularjs-scope

我想在输入字段中添加过滤器,但它会出错。我想如果我在输入字段中键入 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);

  };
});

3 个答案:

答案 0 :(得分:1)

在您的情况下,您不应使用过滤器,因为它只是格式化值,而不是更改它。此外,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>

答案 1 :(得分:0)

我会更换一个ng-change。

<div ng-app="app">
    <div ng-controller="ParentCtrl">
        <input ng-model="inputValue" ng-change="inputValueChanged()" />
    </div>
</div>

的Javascript

angular.module('app', [])

function ParentCtrl($scope){
    $scope.inputValueChanged = function(){
        if($scope.inputValue === '1k'){
            $scope.inputValue = '1000';
        }
    }
}

小提琴:http://jsfiddle.net/unbbmk7m/

答案 2 :(得分:0)

<强>控制器:

angular.module('app',[]).controller('cntrl',function($scope){
    $scope.user ="";
    var dict = {
        k: 1000,
        l: 100000
      };

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

    $scope.$watch('user', function() {
      var match;
      var val = $scope.user;
      if(angular.isString(val) && (match = val.match(regex)) ) {
        $scope.user = match[1] * dict[match[2]];
      }
    });
});

HTML

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