如何在没有 $index 的情况下计算嵌套 ng-repeat 中的项目答案

【问题标题】：how to count items in nested ng-repeat without $index如何在没有 $index 的情况下计算嵌套 ng-repeat 中的项目
【发布时间】：2019-10-31 21:05:53
【问题描述】：

我想在条件匹配时计算ng-repeat 的迭代次数。

我试过$index，但它会打印嵌套ng-repeat中的所有迭代/项目

小提琴链接：https://jsfiddle.net/gdr7p1zj/1/

<tbody ng-controller="MainCtrl">
    <tr ng-repeat-start="a in test1">
          <td>{{a.categoryName}}(count_here)</td>
        </tr>
        <tr ng-repeat-end ng-repeat="b in test" ng-if="a.categoryId==b.categoryId">
          <td>{{b.name}}</td>
        </tr>
</tbody>

i want like this 
category_one(4)  <=item count 4 items in this category so 4 will display
    item1
    item2
    item3
    item4 
category_two(2)
    item5
    item6

<!-- this is in controller -->

$scope.test1=[{
        categoryId:'1',categoryName:'category one'
    },
    {
        categoryId:'2',categoryName:'category two'
    }]
    $scope.test = [
        {categoryId:'1',name:'cate 1 elem0'},
        {categoryId:'1',name:'cate 1 elem1'},
        {categoryId:'2',name:'cate 2 elem'}
    ];
});

【问题讨论】：

标签： javascript html angularjs angularjs-ng-repeat

【解决方案1】：

感谢您的帮助。但是我在没有任何函数调用或过滤器的情况下得到了预期的输出

这里小提琴链接：https://jsfiddle.net/wk3nzj96/

html代码：

<div ng-app='myapp' >
<div ng-controller="MainCtrl">
  <table ng-init="$scope.counter=0">

    <tr ng-repeat-start="cate in mainCategory">
     <td>   {{cate.name}} ({{$scope.counter[$index]}})</td></tr>

    <tr ng-repeat="itemsItr in items" ng-init="$scope.counter[$parent.$parent.$index]=$scope.counter[$parent.$parent.$index]+1" ng-if="itemsItr.mid==cate.id">
        <td>{{itemsItr.name}}</td>
    </tr>
    <tr ng-repeat-end ng-if="false"></tr>
  </table>

</div>
</div>

和控制器代码：

(function() {
  angular.module('myapp', []).controller('MainCtrl', function($scope) {
     $scope.mainCategory = [
   { name: "categoryOne",id:1 },
   { name: "categoryTwo",id:2 }
    ];
     $scope.items = [
   { name: "item1FromCateOne" ,mid:1 },
   { name: "item2FromCateOne",mid:1 },
   { name: "item3FromCateOne" ,mid:1 },
   { name: "item1FromCateTwo",mid:2 }
    ];

  });

这是执行此操作的标准方法吗？

【讨论】：

如果允许的话，有点建议：尽量去掉视图中的这个大表达式（ng-init="$scope.counter[$parent.$parent.$index]=$scope.counter[$parent.$parent.$index]+1"）。它可能变得非常难以维护。快乐编码:)
@lealceldeiro 非常感谢您的建议。我随时准备接受其他程序员的学习和建议:)

【解决方案2】：

一个选项是在控制器中创建一个函数 (getCount) 来进行计数，如下所示：

$scope.getCount = function(categoryId) {        // returns the count by matching by categoryId
  return $scope.test.filter(function(element) { // first, filter elements in `test`
    return element.categoryId === categoryId;   // matching by categoryId
  }).length;                                    // then, return the count of how many results we got after the filter
}

并在 html 中像这样调用该函数：

<tbody ng-controller="MainCtrl">
    <tr ng-repeat-start="a in test1">
      <td>{{a.categoryName }} ({{getCount(a.categoryId)}})</td> <!-- <-- call the function in order to display the count -->
    </tr>
    <tr ng-repeat-end ng-repeat="b in test" ng-if="a.categoryId == b.categoryId">
      <td>{{b.name}}</td>
    </tr>
</tbody>

在此处查看演示：https://jsfiddle.net/lealceldeiro/v9gj1ok4/11/

【讨论】：