Question

我无法使用过滤器处理数字/文本输入。

<input type="number" class="text-center" ng-model="redeem.redemption.Amount | number: 2">

这会抛出错误：Expression＆＃39; redeem.redemption.Amount |数＆＃39;是不可转让的如果我删除过滤器，它的工作原理。我尝试将相同的滤镜应用于角度输入演示，它工作正常（https://docs.angularjs.org/api/ng/filter/number）。我能看到的唯一区别是我绑定到范围上的对象而不是直接绑定值。我在这里找不到容易的东西吗？

Answer 1

我想你要做的是显示他们输入的“格式化值”？

然后只需从ng-model和控制器watch redeem.redemption.Amount中移除过滤器，并在watch被触发时对其进行格式化。您还需要设置timeout以允许用户输入，否则每次用户点击某个号码时，watch都会尝试格式化该号码，而用户将无法输入任何内容。

您发布的代码永远不会起作用，因为ng-model与您指明的范围的属性建立双向数据绑定，这就是为什么您不能在那里设置过滤器，它只接受一个属性范围，将更新以及更改时读取值的位置。 filter是一个带有一个输入的函数，并检索不同的输出，想一想，如果你设置过滤器，那么Angularjs就不知道它在哪里设置输入的变化。

这样的事情：

app.controller('MyCtrl', function($scope,$filter,$timeout) {
  $scope.testValue = "0.00";      
  var myTimeout;
  $scope.$watch('testValue', function (newVal, oldVal) {
      if (myTimeout) $timeout.cancel(myTimeout);    
      myTimeout = $timeout(function() {
          if($filter('number')(oldVal, 2)!=newVal)
            $scope.testValue = $filter('number')($scope.testValue, 2);
      }, 500);
  });
});

http://plnkr.co/edit/WHhWKdynw0nA4rYoy6ma?p=preview

尝试调整超时的延迟，现在将其设置为500毫秒。

Answer 2

你不能把过滤器放在ng-model指令中。你可以使用它来做控制器：

redeem.redemption.Amount=redeem.redemption.Amount.toFixed(2);

或者您可以使用jquery来防止按十进制数字后按两位数字：

$('.decimal').keypress(function (e) {
        var character = String.fromCharCode(e.keyCode)
        var newValue = this.value + character;
        if (isNaN(newValue) || parseFloat(newValue) * 100 % 1 > 0) {
            e.preventDefault();
            return false;
        }
    });

<input type="number" id="decimal" class="text-center" ng-model="redeem.redemption.Amount | number:">

输入数字过滤器

2 个答案: