AngularJS-使用'true'属性
AngularJS - filter data with 'true' attribute
我使用的是AngularJS,我已经连接了子文档(JSON下面的"订单"),并得到了它的JSON数据量的总和,在orderfood
下我有confirm
属性。我希望仅过滤在confirm
属性中具有值placed
的数据。我的plunker演示
我得到的结果
3 quantities of V 4 Vanilla should be prepared
3 quantities of Power cut should be prepared
预期结果
2 quantities of V 4 Vanilla should be prepared
3 quantities of Power cut should be prepared
JSON
[{
"_id": "56e3bff0e9932ca6425e6f65",
"orderfood": [
{
"qty": "2",
"confirm": "placed",
"name": "V 4 Vanilla"
}
],
"name": "Rohit",
"created": "2016-03-12T07:06:24.424Z"
},
{
"_id": "56e3bd5bc3791b973c048804",
"user": null,
"__v": 10,
"orderfood": [
{
"qty": "1",
"confirm": "cancelled",
"name": "V 4 Vanilla"
},
{
"qty": "3",
"confirm": "placed",
"name": "Power cut"
}
],
"name": "Rohit",
"created": "2016-03-12T06:55:23.244Z"
}];
控制器
$scope.getOrderFoods = function() {
var orderfood = [];
$scope.reduce= function(data){
return data.reduce(function(previousValue,
currentValue, currentIndex, array) {
return previousValue + parseInt(currentValue.qty);
}, 0);
}
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><span>{{reduce(data)}}</span> quantities of <span>{{key}}</span> should be prepared </p>
</div>
我的plunker演示
只需在ng-repeat
:中添加条件作为筛选器
<div ng-repeat="(key,data) in getOrderFoods() | filter: {confirm: 'placed'} | groupBy:'name'">
Plnkr
相关文章:
- AngularJS-使用'true'属性
- sails.js beforeCreate方法只接收required设置为true的模型属性
- 如何使函数将属性值从 FALSE 设置为 TRUE
- hasOwnProperty 在对照父对象属性进行检查时返回 true
- 为什么我的html节点保持类ng隐藏属性ng show=true
- 如何通过javarscript或jquery在数组中添加属性复选框(checked=true)
- AngularJS-为什么不;t替换:true使用templateUrl属性
- Image属性complete在实际渲染图像之前返回true
- 使用 javascript 更改 Gridview 文本框的可见属性 true 在下拉列表的选定索引更改事件上为 tru
- 为什么删除运算符返回 true,即使属性未从对象中删除
- 如何在骨干模型属性中设置布尔值true/false
- 如果返回true,则检查Javascript对象属性
- 使用jQuery将使用复选框的数据属性从false更改为true
- IE8 cloneNode(true)对象不支持此属性或方法
- 如果属性值为true,则按多个属性分组
- AngularJS ng重复筛选器:{visible:true}不遵循属性更改
- 即使没有显式指定属性,hasAttribute也应该返回true,但没有't
- 当javascript中checked属性设置为true时,复选框在UI中不会显示为checked
- 剑道分离器:如何改变“折叠”:false;拆分器属性为“可折叠”:true;点击按钮
- Rails link_to帮助器-提供onclick属性摆脱:remote =>true(动作作为HTML处理)