Почему фильтр не работает в поле ввода в угловом?

Question

Я привязывания, чтобы добавить фильтр в поле ввода, но он дает ошибку ..Я хочу, если я типа 1k в поле ввода он показывает, что текст в поле ввода (значение) .. Другими словами, если я типа 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); 

    }; 
}); 

Answer 1

В вашем случае, вы shoulnd't использовать фильтр, как это только значение формата, а не изменить его. Кроме того, 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> 

Answer 2

Я бы телеграфировать в нг вместо этого.

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

Answer 3

контроллер:

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>