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

嘿，我有一个JSON数组，我从服务调用。我有一些计数器，我想打印出总数组的长度和一些子项的长度。我可以打印出阵列的全长，但我也想打印出具有“绿色”，“红色”和“黄色”进度的项目总数。看到它是一组物体，我将如何去获得绿色，红色，黄色的长度？AngularJS获取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}}打印出第一个对象的字母数p进度值。

来源

2015-09-07 Anish S.

查看使用数组过滤器方法，您可以使用该方法创建只包含所需进度值的新数组，然后询问其长度。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter – azium

使用内置过滤器的角：

{{requestDetails.lenght}} 

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

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

控制器代码：

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

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

注：由于角1.3过滤器必须明确声明其依赖关系，在其上创建一个$watcher，否则这些参数将不被弄脏$digest周期内检查，输出将不受到任何双向绑定的影响。

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

来源

2015-09-07 17:03:37

不错！但是不幸的是，这个迭代已经达到了10美元（...）...我仍然在深入研究它 –

如果你能详细说明这个数组是如何填充和/或改变的，或许我可以提供一些进一步的帮助 –

当然！我正在使用ng-repeat在表元素上循环这个数组...我在桌面上有3个计数器，可以显示总记录数，绿色记录数，红色记录数和黄色记录数...我认为使用这个过滤器与ng-repeat结合会产生摘要错误 –

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

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

来源

2015-09-07 16:58:35 aghidini

如果我理解正确的问题，我们的目标是从显示对象的每个进步类型的罪名？

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

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.

来源

2015-09-07 17:10:57 MLBCodes

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

回答

相关问题