gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 16:46:01 25 4
gpt4 key购买 nike

我有以下数据:

{
"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 文件(而不是从第三方读取),这意味着我可以根据需要更改其结果。

最佳答案

我认为没有针对温度的内置过滤器,但是您可以使用number , currency angularjs 中的过滤器。

您唯一需要做的就是为温度实现自定义 Angular 过滤器,类似的东西,

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

然后格式化对象数组,我是在 Controller 中完成的,你可以选择另一种方式来完成它,比如在 html 中使用过滤器。 (不要忘记将 $filter 服务注入(inject) Controller 。)

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 or ng-show based on last迭代与否,

<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

关于javascript - 如何通过为每个对象指定过滤器类型来过滤 AngularJS 中的对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31231940/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com