如果值是使用angularJS的数字，则应用过滤器

Question

我在angularjs的控制器中具有以下结构：

$scope.modelInfo = {"key1":value1, "key2": value2,.....};

在视图中：

<tr ng-repeat="(key,value) in modelInfo">
    <td width="60%">{{key}}</td>
    <td>{{value}}</td>
</tr>

如果typeof value是数字，则需要使用角过滤器打印值，例如：

{{value | number : 4}}

Answer 1

您可以编写一个自定义过滤器来实现此目的：

myApp.filter('myNumber', function($filter) {
    return function(value, fractionSize) {
        if (!angular.isNumber(value)) {
            return value;
        }

        return $filter('number')(value, fractionSize);
    }
});

然后使用它：

{{value | myNumber : 4}}

请参见下面的工作示例：

 var app = angular.module("sa", []); app.controller("FooController", function($scope) { $scope.modelInfo = {"key1":'value1', "key2": 2.453434}; }); app.filter('myNumber', function($filter) { return function(value, fractionSize) { if (!angular.isNumber(value)) { return value; } return $filter('number')(value, fractionSize); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="sa" ng-controller="FooController"> <table> <tr ng-repeat="(key,value) in modelInfo"> <td width="60%">{{key}}</td> <td>{{value | myNumber : 4}}</td> </tr> </table> </div> 

Answer 2

确实没有属性的数据类型真是令人讨厌。 它不是您拥有的好设计。 首先，我希望更改设计以使对象对象模式更精确，以便您可以轻松确定哪个对象持有哪个数据类型值。

尽管您可以通过创建自定义过滤器来实现，但可以通过检查typeof值来实现。

HTML

<tr ng-repeat="(key,value) in modelInfo">
    <td width="60%">{{key}}</td>
    <td>{{value | myNumber: 4}}</td>
</tr>

码

app.filter('myNumber', function($filter){
  return function(input, precision){
     if(!input) return input;
     if(typeof input === "number")
       return $filter('number')(input, precision);
  }
})

Answer 3

一种方法是创建一个中间过滤器来测试您的值的类型：

app.filter('filterIfNumber', function ($filter) {
  return function (item) {
    if (angular.isNumber(item)) {
       return $filter('number')(item);
    }   
    return item;
  };
});