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

执行此操作的一种方法是创建一个中间过滤器来测试值的类型：

var prodLines = products.productLines.length;
var prodLinesTypes = products.productLines.reduce(function(a,b){ 
       return a + (b.types.length) 
}, 0);

console.log(prodLines); //4
console.log(prodLinesTypes); //13

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

3 个答案: