使用angularjs显示ng-repeat中的数组计数

时间:2015-09-16 13:47:21

标签: angularjs elasticsearch angularjs-ng-repeat

我有一个包含数据数组的JSON响应。

 $scope.Load = function () {
        $http.post(elasticSearchURL, { "aggs": { "By_type": { "terms": { "field": "Name" }, "aggs": { "By_color": { "terms": { "field": "Color" } } } } } }).
          then(function (response) {
              $scope.modelList = response;


          }, function (response) {
          });

    }

我想在JSON中显示每个元素的计数。

MyHtml代码

<div ng-repeat="fruits in modelList.data.hits.hits | unique : '_source.fruitsName' | orderBy:'_source.fruitsName'   ">

{fruits._source.name.length}

</div>

我的Json数据将是这样的

{"_id":"e-AB2","_version":1,"found":true, "_source":{"name":"Apple", "color":"red"}}},
{"_id":"e-AB2","_version":1,"found":true, "_source":{"name":"Apple", "color":"red"}}},
{"_id":"e-AB2","_version":1,"found":true, "_source":{"name":"Apple", "color":"red"}}}

仅显示fruitname“Apple”长度:5。我想显示_source.name

的数组长度

我已尝试{{$index.length}},但由于我在"unique:"

中使用<div>,因此将计数显示为1

如何在angularjs中实现。

提前致谢

1 个答案:

答案 0 :(得分:2)

我认为最简单的方法是创建包含计数的hashmap:

$scope.counts = {};

$http.post(elasticSearchURL, postData).then(function (response) {
    $scope.modelList = response.data;
    response.data.forEach(function (item) {
        var source = item._source.name;
        if (!$scope.counts.hasOwnProperty(source)) {
            $scope.counts[source] = 0;
        }
        $scope.counts[source]++;
    });
});

然后在视图中您可以使用:

Count = {{counts[fruits._source.name]}}

$scope.counts将如下所示:

{ 'Apple':3, 'Orange':5}

您可能想要做的是以相同的方式将所有数据映射到不同的数组并摆脱unique过滤器,因为无法直接在视图中执行您所要求的操作