Question

我试图做一个＆＃34;无限滚动＆＃34;具有4个级别的嵌套数据结构的页面，通过ng-repeats显示如下：

Category 1
- Item
  - Sub Item 1
   - Activity A
   - Activity B
   - Activity C
  - Sub Item 2
   - Activity D
Category 2

我已经能够通过我的示波器中的以下功能获得给定项目的准确索引，但我不确定如何将其应用于过滤器上的各种ng-repeats以进行切割关闭我上面列表中的第5项（活动B）。

$scope.itemIndex = function(item) {
    var count = 0;    
    if($scope.training[0] && $scope.training[0].Assigned.length > 0) {
      count++;
      if(item === $scope.training[0].Assigned) {  
        return count;
      }
      for (var n = 0; n < $scope.training[0].Assigned.length; n++) {
        count++;
        if(item === $scope.training[0].Assigned[n]) {  
          return count;
        }
        for (var r = 0; r < $scope.training[0].Assigned[n].requirements.length; r++) {
          count++;
          if(item === $scope.training[0].Assigned[n].requirements[r]) {  
            return count;
          }
          for(var a = 0; a < $scope.training[0].Assigned[n].requirements[r].activities.length; a++) {
            count ++;
            if(item === $scope.training[0].Assigned[n].requirements[r].activities[a]) {  
              return count;
            }
          }
        }
      }
    }
  }

我已经尝试了范围内的全局计数器的各种组合，并通过子项传递$ index但无法找到有效的解决方案。使用单个总计数来限制嵌套重复的最佳方法是什么？我可以动态更改计数？

Answer 1

您是否尝试过使用ng-if将每个列表的ng-repeat限制在可接受的范围内。

在你说的索引上使用ng-if。

检查https://docs.angularjs.org/api/ng/directive/ngIf以获取有关使用ng-if指令

的更多信息

希望这有帮助

Answer 2

当您对所有项目进行迭代时，您可以跟踪每个集合的限制，然后在limitTo中为每个ng-repeat使用这些值。 e.g：

var MAX_ITEMS = 10;

$scope.updateLimits = function() {
    var count = 0;

    $scope.training[0].limit = 0;
    for (var n = 0; n < $scope.training[0].Assigned.length; n++) {
        if (count < MAX_ITEMS) {
            $scope.training[0].limit++;
        }
        count++;

        $scope.training[0].Assigned[n].limit = 0;
        for (var r = 0; r < $scope.training[0].Assigned[n].requirements.length; r++) {
            if (count < MAX_ITEMS) {
                $scope.training[0].Assigned[n].limit++;
            }
            count++;

            $scope.training[0].Assigned[n].requirements[r].limit = 0;
            for (var a = 0; a < $scope.training[0].Assigned[n].requirements[r].activities.length; a++) {
                if (count < MAX_ITEMS) {
                    $scope.training[0].Assigned[n].requirements[r].limit++;
                }
                count++;
            }
        }
    }
};

Answer 3

我最后使用了aarosil的建议，其中我有原始数据集的副本，该数据集仅包含我想要显示的数据子集，这消除了限制ng-repeats的需要。

限制嵌套的Angular ng-repeat数据结构

3 个答案: