Javascript AngularJS获取JSON数组中特定项的长度

嘿，我有一个JSON数组，我正在从一个服务调用它。我有一些计数器，我想打印出总数组的长度和一些子项的长度。我可以打印出整个数组的长度，但我也想打印出进度为“绿色”、“红色”和“黄色”的项目总数。看到这是一组对象，我该如何得到绿色、红色和黄色的长度

JSON:

我存储的服务名为：

$scope.requestDetails = [];
$scope.requestDetails = data;

HTML:

{{requestDetails.length}

---

出于好奇，我试图打印

{{requestDetails.progress.length}

，但结果为空，打印

{{requestDetails[0].progress.length}

会打印出第一个对象的进度值的字母数。

您可以在控制器中准备数据，计算每个元素：

$scope.itemData = {};
for (var i = 0; i < $scope.requestDetails.length; ++i) {
  var detail = $scope.requestDetails[i];
  if ($scope.itemData[detail.progress] === undefined) {
    $scope.itemData[detail.progress] = 0;
  }
  $scope.itemData[detail.progress]++;
}

$scope.itemData={}；
对于（变量i=0；i<$scope.requestDetails.length；++i）{
var detail=$scope.requestDetails[i]；
if（$scope.itemData[detail.progress]==未定义）{
$scope.itemData[detail.progress]=0；
}
$scope.itemData[detail.progress]+；
}

并在模板中使用它：

<div class="red">{{ itemData.red }}</div>
<div class="green">{{ itemData.green }}</div>

{{itemData.red}
{{itemData.green}

使用角度内置过滤器：

{{requestDetails.lenght}}

{{(requestDetails | filter: {progress: 'red'}).length}}

您还可以在控制器上使用自定义函数进行自定义逻辑：

控制器代码：

  $scope.colorFilter = function(color) {
    return function (obj) {
      return obj.progress === color;
    };
  };

{{(requestDetails | filter: colorFilter('red')).length}}

注意：由于Angular 1.3过滤器必须明确声明其依赖项，才能在其上创建一个

$watcher

，否则这些参数将不会在

$digest

周期内被脏检查，并且输出将不受任何双向绑定的影响

普朗克：

---

如果我正确理解了问题，那么目标是显示对象中每种进度类型的计数

如果是这样，这里有一个可能的解决方案

HTML

{{requestDetails.length}
{{（requestDetails | filter:{progress:'red'}）.length}
{{（requestDetails | filter:{progress:'green'}）.length}

---

此方法利用内置的角度过滤器。有关筛选器和angularjs的更多信息，请参见使用数组筛选器方法，您可以使用该方法创建一个只包含所需进度值的新数组，然后询问其长度。美好的但不幸的是，这会导致10$digest（）迭代的失败……我仍在深入研究它。如果您能详细说明这个数组是如何填充和/或更改的，也许我可以提供一些进一步的帮助！我在一个表元素上使用ng repeat循环通过这个数组…我在表的顶部有3个计数器，它将显示总计、绿色、红色和黄色记录…我认为使用这个过滤器和ng repeat会吐出摘要错误Hey Oleg，它现在被修复了！在我的控制器中，我正在调用我的服务并存储上述数据，我有两个相同的“GET”调用实例来获取我的数据…我删除了副本，并像一个符咒一样工作…谢谢

{{requestDetails.lenght}}

{{(requestDetails | filter: {progress: 'red'}).length}}

  $scope.colorFilter = function(color) {
    return function (obj) {
      return obj.progress === color;
    };
  };

{{(requestDetails | filter: colorFilter('red')).length}}

<div>{{requestDetails.length}}</div>
<div class="red">{{(requestDetails | filter: {progress: 'red'}).length}}</div>
<div class="green">{{(requestDetails | filter: {progress: 'green'}).length}}</div>