angularjs - 防止 Angular $watch 循环

Question

我正在整理一个快速的资金输入，它会自动将小数点添加到输入的金额中。但是我遇到了一个问题，我的 $watch 函数永远循环然后出错。这就是我所拥有的：

$scope.$watch('enteredBillAmount.number', function(newValue, oldValue) {
    if(!angular.equals(newValue, oldValue)) {
        $scope.enteredBillAmount.number = Number(newValue) / 100;
    }
});

任何建议，将不胜感激。

Answer 1

你的 watch 函数改变了你正在观看的项目，所以它当然会循环播放。每次函数运行时都会触发手表。

您可以做以下两件事之一，或者为数字使用不同的变量：

$scope.$watch('enteredBillAmount.number', function(newValue, oldValue) {
    if(!angular.equals(newValue, oldValue)) {
        $scope.enteredBillAmountNumber = Number(newValue) / 100;
    }
});

但是，考虑到这只是一个格式化函数，您还可以创建一个自定义过滤器：

angular.filter('bill', function() {
  return function(input) {
    return input ?  Number(input) / 100 : '';
  };
});

Answer 2

Angular 有一个内置的货币过滤器，你应该考虑使用它。这也将使用系统的语言环境，非常方便。你将如何使用它是你输出的地方：

<span id="billedAmount">{{enteredBillAmountNumber | currency}}</span>

如果你需要在控制器中使用它，你可以注入 $filter 然后使用：

var myFormattedAmount =  $filter('currency')($scope.enteredBillAmountNumber);