javascript - 输入数字过滤器

Question

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

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

这会抛出一个错误:Expression 'redeem.redemption.Amount | number' 是不可分配的如果我删除过滤器，它会起作用。我尝试将相同的过滤器应用于 Angular 输入演示并且它工作正常(https://docs.angularjs.org/api/ng/filter/number)。我能看到的唯一区别是我绑定(bind)到作用域上的一个对象，而不是直接绑定(bind)到一个值。我在这里缺少什么容易的东西吗？

Answer 1

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

然后只需从 ng-model 中删除过滤器并在您的 Controller 中 watch redeem.redemption.Amount 并在watch 被触发。您还需要设置一个 timeout 以允许用户输入，否则每次用户点击数字时 watch 都会尝试格式化数字和用户将无法输入任何内容。

您发布的代码永远不会工作，因为 ng-model 与您指定的范围的属性建立了一种双向数据绑定(bind)，这就是为什么您不能在那里设置过滤器的原因，它会只接受范围的一个属性，该属性将被更新，并且当它发生变化时将从那里读取值。 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 毫秒。