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

Question

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

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

因此，如果像这样计算变量

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

其中price为undefined。

当价格为NaN时，它会显示undefined。

但当price defined', angular.isNumber(vm.totalOfCostCalculationItems) returns为真时。

但是当我在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，则需要将其作为ViewModel的一部分：

<强>控制器

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'也被解析为真。如果您想避免此类行为，则需要使用angular.isNumber和!isNaN检查号码：

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