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

Question

嘿，我有一个从服务中调用的JSON数组。我有一些计数器，想要打印出整个数组的长度和一些子项的长度。我能够打印出整个数组的完整长度，但是我也想打印出具有"绿色"、"红色"和"黄色"进度的项目总数。由于它是对象数组，我该如何获得绿色、红色和黄色的数量？

JSON：

[
   {
     name: User1,
     progress: "green"
   },
   {
     name: User2,
     progress: "yellow"
   },
   {
     name: User3,
     progress: "green"
   },
    {
     name: User4,
     progress: "red"
   },
]

我将调用的服务存储为：

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

HTML：

<div class="total">{{requestDetails.length}}</div>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>

出于好奇，我尝试打印{{requestDetails.progress.length}}，但是它没有显示任何内容，而打印{{requestDetails[0].progress.length}}则会显示第一个对象进度值的字母数量。

- Anish S.

---

看看使用数组过滤方法，你可以使用它来创建一个只包含你想要的进度值的新数组，然后询问该数组的长度。https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter - azium

Answer 1

使用Angular内置过滤器：

{{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周期内进行脏检查，输出结果将不受任何双向绑定的影响。

Plunker： http://plnkr.co/edit/zgzSqeMVnCQbpDitrSI3?p=preview

- Oleg Belousov

---

不错！但是很遗憾，它会输出“已达到10个$digest()迭代”...我还在深入研究中。 - Anish S.

如果您能详细说明这个数组是如何填充和/或更改的，我可能可以提供进一步的帮助。 - Oleg Belousov

当然可以！我正在使用ng-repeat在表元素上循环遍历这个数组...我在表格顶部有3个计数器，用于显示总记录数、绿色、红色和黄色记录的数量...我认为使用这个过滤器结合ng-repeat会导致摘要错误。 - Anish S.

嘿，Oleg，现在修好了！在我的控制器里，我调用我的服务并存储上述数据，我有两个相同的“GET”调用来获取我的数据...我删除了重复的，现在完美运行...谢谢 - Anish S.

Answer 2

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

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

然后在您的模板中使用它：

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

- aghidini

Answer 3

如果我理解问题正确的话，目标是从对象中显示每个进度类型的计数？

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

HTML

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

这种方法利用了内置的Angular过滤器。如果想要了解更多关于过滤器和AngularJS的内容，请参考文档。

- MLBCodes