javascript - 如何检查 AngularJS 模板 HTML 中的数字

Question

发生了一些奇怪的事情，但我不知道为什么。

在我的应用程序中，对于某些条件，某些值作为未定义传递。

所以，如果一个变量是这样计算的

selectedPricingMappingObj.forEach(function(server){
    .....
    .....
    vm.totalOfCostCalculationItems += server.details.price;

其中价格为未定义。

当价格未定义时，它显示NaN。

但是当价格被定义'时， angular.isNumber(vm.totalOfCostCalculationItems) 返回 true`。

但是当我在 UI 中尝试相同的操作时。

<td style="text-align:left;"
    ng-if="angular.isNumber(vm.totalOfCostCalculationItems)">
  <b>${{vm.totalOfCostCalculationItems.toFixed(2)}}<b>
</td>

什么也没显示。这是为什么？

Answer 1

angular.isNumber不适用于 ng-if因为angular不是 $scope 的一部分。它只是一个全局变量。如果你确实需要使用angular.isNumber在 View 中，您需要将其作为 ViewModel 的一部分:

Controller

vm.isNumber = angular.isNumber;

查看

<td style="text-align:left;" ng-if="vm.isNumber(vm.totalOfCostCalculationItems)">

---

编辑

回答有关angular.isNumber(NaN)的问题返回评论中出现的 true，我进行了快速搜索并发现了这个:https://github.com/angular/angular.js/issues/701 。虽然这对我来说也有点不合逻辑，但这种行为似乎符合 JavaScript 标准，如 typeof NaN === 'number'也被解析为true。如果你想避免这种行为，你需要用 angular.isNumber 检查号码。和!isNaN :

vm.isNumber = function(number) {
    return angular.isNumber(number) && !isNaN(number);
}