javascript - AngularJS - 使用 'true' 属性过滤数据

标签 javascript angularjs json angular-filters

我正在使用 AngularJS,并且我已经加入了子文档(来自下面的 JSON 的“orderfood”)并获取了我的 JSON 数据的数量总和,在 orderfood 下我有 confirm 属性。我只想过滤 confirm 属性中具有值 placed 的数据。我的plunker demo

我得到的结果

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"
}];

Controller

$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 demo

最佳答案

只需将条件添加为 ng-repeat 中的过滤器即可:

<div ng-repeat="(key,data) in getOrderFoods() | filter: {confirm: 'placed'} | groupBy:'name'">

Plnkr

关于javascript - AngularJS - 使用 'true' 属性过滤数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37290528/

相关文章:

javascript - 自动提交不适用于此脚本

javascript - 跳转到 SPA 中的 HTML 元素

angularjs - 使用 Controller 而不是链接将父 Controller 范围纳入指令

php - 使用 JSON 更新查询失败

json - Google 地方信息自动完成功能可以在标签编辑器字段中使用吗?

javascript - 更改 D3-legend 中符号的颜色

javascript - 在 express 中处理 javascript 错误

javascript - AngularJS ui 路由器 - 如何忽略某些路由?

javascript - AngularJS:如何在选择另一个跨度时取消选择一个跨度

java - Gson 为特定类或字段序列化 null