限制嵌套的Angular ng重复数据结构

Limiting nested Angular ng-repeat data structure

本文关键字：数据结构 ng Angular 嵌套      更新时间：2024-01-07

我正试图用嵌套的数据结构做一个"无限滚动"页面，该数据结构有4个级别，通过ng重复显示如下内容：

类别1-项目-分项1-活动A-活动B-活动C-分项2-活动D类别2

我已经能够通过我范围内的以下函数获得给定项目的准确索引，但我不知道如何将其应用于各种ng重复的过滤器，以切断上面列表中的第五个项目（活动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的各种组合，但一直无法找到有效的解决方案。在我可以动态更改计数的情况下，用一个总计数来限制嵌套重复的最佳方法是什么？

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

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

检查https://docs.angularjs.org/api/ng/directive/ngIf了解更多关于使用ng-if指令的信息

希望这能帮助

在迭代所有项目时，可以跟踪每个集合的限制，然后在limitTo中为每个ng-repeat使用这些值。例如：

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++;
            }
        }
    }
};

我最终使用了上面aarosil的建议，其中我有一个原始数据集的副本，它只包含我想要显示的数据的子集，这消除了在ng重复中限制的需要。

相关文章：