如何通过为每个对象指定过滤器类型来过滤AngularJS中的对象？

Question

我有以下数据：

{
    "records": [
        {
            "name": "Visits",
            "jan": "25000",
            "feb": "31050",
            "type" : "number"
        },
        {
            "name": "CPC",
            "jan": "52",
            "feb": "39",
            "type" : "currency"
        },
        {
            "name": "Weather",
            "jan": "26",
            "feb": "28",
            "type" : "temperature"
        }
    ]
}

我正在使用以下模板在表格中显示：

<table ng-app="myApp" ng-controller="kpisController">
    <thead>
        <tr>
            <th ng-repeat="(key, val) in objects[0]">{{key}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="object in objects">
            <td ng-repeat="(key, val) in object">{{val}}</td>
        </tr>
    </tbody>
</table>

结果如下表：

-----------------------------------------
| name    | jan   | feb   | type        |
-----------------------------------------
| Visits  | 25000 | 31050 | number      |
-----------------------------------------
| CPC     | 52    | 39    | currency    |
-----------------------------------------
| Weather | 26    | 28    | temperature |
-----------------------------------------

而我要做的是根据 JSON 文件提供的“类型”来处理数据的表示方式，从而产生以下结果：

-------------------------------------------
| name    | jan    | feb    | type        |
-------------------------------------------
| Visits  | 25,000 | 31,050 | number      |
-------------------------------------------
| CPC     | $52.00 | $39.00 | currency    |
-------------------------------------------
| Weather | 26˚C   | 28˚C   | temperature |
-------------------------------------------

另外，我想隐藏最后一列，以便最终结果如下：

-----------------------------
| name    | jan    | feb    |
-----------------------------
| Visits  | 25,000 | 31,050 |
-----------------------------
| CPC     | $52.00 | $39.00 |
-----------------------------
| Weather | 26˚C   | 28˚C   |
-----------------------------

我正在生成 JSON 文件（而不是从第三方读取），这意味着我可以在需要时更改其结果。

Answer 1

我认为没有内置的filter 用于温度，但您可以在angularjs 中使用number、currency 过滤器。

您唯一需要做的就是为温度实现一个自定义角度过滤器， 比如，

app.filter('temperature', function() {
    return function(input) {
        return input+'℃';
    };
});

然后格式化对象数组，我在控制器中完成了它，您可以选择另一种方式来执行它，例如在 html 中使用过滤器。 （不要忘记将$filter 服务注入控制器。）

angular.forEach($scope.objects, function(value, index) {
    value.jan = $filter(value.type)(value.jan);
    value.feb = $filter(value.type)(value.feb);
});

这将格式化并将值重新分配给对象属性。

最后你需要隐藏最后一列，这样你就可以根据最后一次迭代使用ng-if、ng-hide 或ng-show，

<td ng-repeat="(key, val) in object" ng-if="!$last">{{ val}}</td>

仅在迭代不是最后一次时显示

这是DEMO

或您可能希望使用ajax 获取数据。所以你可以这样做，

$http.get('data.json').success(function(data, status, headers, config) {
    $scope.objects = formatData(data);
  }).
  error(function(data, status, headers, config) {

  });

调用函数formatData格式化ajax数据，并将格式化后的数据赋值给$scope.objects。

function formatData(data) {

    angular.forEach(data, function(value, index) {
      value.jan = $filter(value.type)(value.jan);
      value.feb = $filter(value.type)(value.feb);
    });

    return data;    
 }

这是DEMO

更新

具有更多对象属性的动态数组，

创建一个数组并定义不可格式化的属性，

var escapeIndexes= ['name', 'type'];

检查属性是否可格式化，如果是，请对其进行格式化。如果您有兴趣删除 type 属性，您也可以在这里执行并删除 html 中的 ng-if 东西，这样会更干净。 :)

angular.forEach(data, function(value, index) {
  angular.forEach(value, function(val, key) {
    if(escapeIndexes.indexOf(key) === -1) {
      value[key] = $filter(value.type)(val);
    }
  });

  // delete the type property from the object
  delete value['type'];
});

这里是DEMO

Answer 2

你可以试试：

<table ng-app="myApp" ng-controller="kpisController">
<thead>
    <tr>
        <th ng-repeat="(key, val) in objects[0]">{{key}}</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="object in objects">
        <td ng-repeat="(key, val) in object | filter:type ">{{val}}</td>
    </tr>
</tbody>