如果值为数字，则应用过滤器 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 是数字，我需要用 angular 过滤器打印值，例如：

{{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;
  };
});

如果值为数字，则应用过滤器 angularJS

Apply filter if value is a number using angularJS

javascript

filter

angularjs

angularjs-ng-repeat

angularjs-filter