获取分组数据角度过滤器的总和
getting sum of grouped data angular-filter
我正在使用角度过滤器对数据进行分组。 虽然我能够对数据进行分组并获取数据长度( orderfood
),但我无法在分组数据中获取qty
的总和。 我的普伦克演示
我得到的结果
Isnain Meals - 2
Chicken Burger - 2
我需要的结果
Isnain Meals - 4 //sum of qty of Isnain Meals from JSON data (1+3)
Chicken Burger - 9 //sum of qty of Chicken Burger from JSON data (3+6)
数据
$scope.orders = [{
"_id": "56b0c315e179bb0e00a44dbf",
"orderfood": [{
"_id": "569d865bff1fe20e00f8ba97",
"qty": "1",
"confirm": true,
"price": 154,
"name": "Isnain Meals"
}, {
"_id": "569d865bff1fe20e00f8ba98",
"qty": "3",
"confirm": true,
"price": 154,
"name": "Isnain Meals"
}],
"content": "9176649143",
"created": "2016-02-02T14:54:13.926Z"
}, {
"_id": "56b06ed25b53250e00ccbd73",
"orderfood": [{
"_id": "569d84f04834c10e003dff36",
"qty": "6",
"confirm": true,
"price": 125,
"name": "Chicken Burger"
}],
"content": "6886058585",
"created": "2016-02-02T08:54:42.986Z"
}, {
"_id": "56b06ed25b53250e00ccbd74",
"orderfood": [{
"_id": "569d84f04834c10e003dff37",
"qty": "3",
"confirm": true,
"price": 125,
"name": "Chicken Burger"
}],
"content": "6886058585",
"created": "2016-02-02T08:54:42.986Z"
}];
控制器代码
$scope.getOrderFoods = function() {
var orderfood = [];
angular.forEach($scope.orders, function(order) {
angular.forEach(order.orderfood, function(orderfoo) {
if (orderfood.indexOf(orderfoo) == -1) {
orderfood.push(orderfoo);
}
})
});
return orderfood;
}
.HTML
<div ng-repeat="(key,data) in getOrderFoods() | groupBy:'name'">
<p>{{key}} - {{data.length}}</p>
<!-- instead of the data.length, i need the sum of qty -->
</div>
我的普伦克演示
您可以使用javascript Array.reduce方法来生成数量总和。
<div ng-repeat="(key,data) in getOrderFoods() | groupBy:'name'">
<p>{{key}} - {{reduce(data)}}</p>
</div>
$scope.reduce= function(data){
return data.reduce(function(previousValue,currentValue, currentIndex, array){
return previousValue + parseInt(currentValue.qty);
}, 0);
}
在您的解决方案中使用data.length
返回数组长度而不是总qty
groupBy
因为基于 groupBy 条件生成数组。
<div ng-repeat="(key,data) in getOrderFoods() | groupBy:'name'">
<p>{{key}} - {{data.length}}</p>
</div>
在此重复中生成两个数组,每个数组中有两个项目,因为您有两个类型项目名称,每个类型两次。
您可以使用另一个函数来计算将在 ng-repeat
中调用的总数量。在我的解决方案中使用getTotalQuantity(data)
喜欢在 html 中:
<div ng-repeat="(key,data) in getOrderFoods() | groupBy:'name'">
<p>{{key}} - {{getTotalQuantity(data)}}</p>
</div>
在控制器中:
$scope.getTotalQuantity = function(items) {
var total =0;
angular.forEach(items, function(item) {
total+= parseInt(item.qty);
});
return total;
}
相关文章:
- 如何“;过滤器”;或者以其他方式重构该数据
- AngularJs orderby 过滤器无法正确排序数据
- AngularJS过滤器不适用于我的数据:关联数组
- 角度ng重复显示应用过滤器之前的数据
- Rally App SDK 2.0rc1-为什么我的组合框只在第一次点击时忽略数据存储过滤器
- AngularJS自定义过滤器调用了两次,并在第二次调用时删除输入数据
- 淘汰过滤器json数据
- PHP-AJAX复选框过滤器使用数据标记属性
- 获取分组数据角度过滤器的总和
- EXT JS : 数据存储过滤器功能不起作用
- 在应用过滤器之前,我需要隐藏所有过滤器容器数据
- 数据过滤器页面加载
- Angularjs d3 自定义指令,带有数据过滤器
- 角度:搜索器(过滤器)根据数据类型工作不同
- 角度数据资源上的子字符串过滤器
- 角度:在包含外部数据的ng重复上搜索过滤器
- 过滤器 AngularJS REST JSON 数据:错误:badcfg 响应与配置的参数不匹配
- free-jqgrid:保存、加载和应用过滤器数据的更简单方法,包括过滤器工具栏文本和页面设置
- JavaScript 数据表过滤器选项不起作用
- ng angularjs中的重复过滤器数据不起作用