Question

嘿，我有一个JSON数组，我从服务中调用。我有一些计数器，我想打印出总数组的长度和一些子项的长度。我能够打印出阵列的全长，但我也想打印出有进展的项目总数＆＃34;绿色＆＃34;，＆＃34;红色＆＃34;，和＆＃34;黄色＆＃34;。看到它是一系列物体，我将如何获得绿色，红色，黄色的长度？

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}}打印出第一个对象的进度值的字母数。

Answer 1

使用角度内置过滤器：

std::pair(p_pinNumber, pin)

您还可以在控制器上使用自定义功能来实现自定义逻辑：

控制器代码：

{{requestDetails.lenght}}

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

注意：由于Angular 1.3过滤器必须明确声明其依赖关系以在它们上创建$scope.colorFilter = function(color) { return function (obj) { return obj.progress === color; }; }; {{(requestDetails | filter: colorFilter('red')).length}}，否则这些参数将不会在$watcher周期内进行脏检查，并且输出不会受到任何双向绑定。

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

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>

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>

此方法利用内置的角度过滤器。有关过滤器和angularjs的更多信息，请参阅docs.

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

3 个答案: