why filter not working in input field in angular?

Question

I am tying to add filter in input field but it gives error ..I want if I type 1k in input field it show it text 1,000 in input field (value)..In other words if I type 1k ..it convert 1k or remove / change 1k to 1000.

I try like that but not work ..here is my code

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

  };
});

Yoann Prot · Accepted Answer · 2016-01-28 15:44:45Z

1

In your case, you shoulnd't use filter as it is only to format value, not to change it. In addition, ngModel is two-way binding and only support variable affectation.

You can use a directive instead :

JS (add improvement suggested by 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>

edited Jan 28, 2016 at 15:44

answered Jan 28, 2016 at 14:17

Yoann Prot

5242 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user944513 Over a year ago

please share plunker

user944513 Over a year ago

I make plunker that work fine but there is problem "," not come..mean 1k ..should display 1,000..and 10k display 10,000

Yoann Prot Over a year ago

Right :) should be better now : plnkr.co/edit/SIDsjUWuCs5HKdarfEkf?p=preview

Cameron Over a year ago

This is a really good solution, but I noticed it breaks after the first k because of the commas the number filter adds. I made a slight change here to resolve this: plnkr.co/edit/ZBPyh8Iu6sLjYo7czQfB?p=preview

Mathew Berg · Accepted Answer · 2016-01-28 14:10:49Z

0

I would wire up an ng-change instead.

<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';
        }
    }
}

Fiddle: http://jsfiddle.net/unbbmk7m/

answered Jan 28, 2016 at 14:10

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

4 Comments

user944513 Over a year ago

your answer is correct ..but it not work on 2k, 1.2k ...or 1L

user944513 Over a year ago

I think I need to use filter ..my filter is correct but it not set the value in input field

Cameron Over a year ago

No just put the filter logic in the ng-change handler.

Mathew Berg Over a year ago

I only provided an example of what could be done, you will have to flush out the rest.

Shaishab Roy · Accepted Answer · 2016-01-28 14:52:45Z

0

controller:

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

and HTML:

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

answered Jan 28, 2016 at 14:52

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

Collectives™ on Stack Overflow

why filter not working in input field in angular?

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related