AngularJS

Question

我正在尝试获取过滤数据的长度，但我获取的是实际数据的长度，我过滤的数据只有 placed 属性。 my plunk demo

我得到的结果

Total 3 Notifications

2 quantities of V 4 Vanilla should be prepared

3 quantities of Power cut should be prepared

我期望的结果

Total 2 Notifications

2 quantities of V 4 Vanilla should be prepared

3 quantities of Power cut should be prepared

HTML

<p class="orderCounter">Total {{getOrderFoods(reduce).length }} Notifications</p>
<div ng-repeat="(key,data) in getOrderFoods() | filter: {confirm: 'placed'} | groupBy:'name'">
  <p><span>{{reduce(data)}}</span> quantities of <span>{{key}}</span> should be prepared </p>
</div>

控制器

$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;
}

JSON

$scope.orders = [{
"_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"
}];

my plunk demo

Answer 1

添加一个directive用于查找过滤数据的长度

指令

app.filter('numKeys', function() {
    return function(json) {
        var keys = Object.keys(json)
        return keys.length;
    }
});

html

<body ng-controller="MainCtrl">
    <p class="orderCounter">Total {{filtered | numKeys}} Notifications</p>
    <div ng-repeat="(key,data) in filtered =(getOrderFoods() | filter: {confirm: 'placed'} | groupBy:'name')">
        <p><span>{{reduce(data)}}</span> quantities of <span>{{key}}</span> should be prepared </p>
    </div>
</body>

Plunker Demo

如果你有什么doubt.Please让我know.Thanks

Answer 2

您可以使用它来获取过滤后数组的长度。

ng-repeat="item in $data| filter:f as results"

现在您可以使用 results 来检查它的长度或在另一个 div 中与此类似。

ng-if="results.length === 0"

AngularJS - 获取过滤数据的长度

AngularJS - get Length of filtered data

angular-filters