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

【问题标题】：Apply filter if value is a number using angularJS如果值是使用 angularJS 的数字，则应用过滤器
【发布时间】：2016-11-27 08:07:35
【问题描述】：

我在 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}}

【问题讨论】：

标签： javascript angularjs filter angularjs-ng-repeat angularjs-filter

【解决方案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>

【讨论】：

呵呵，你比我快22秒:) +1
不用担心 Pankaj。即使那样你也很棒:)
这里没有人是伟大的，我仍然处于学习阶段。这个世界上有很多东西要学:p 谢谢和欢呼:)
感谢两位。我喜欢这两个答案，但只有我可以检查一个（第一个）。
@maikelm np，我们只关心你应该得到应该可行的正确答案。但我仍然觉得你在服务器端设计上有问题，正如我在回答中提到的那样......谢谢你的好话，干杯:)

【解决方案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);
  }
})

【讨论】：

【解决方案3】：

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

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

【讨论】：