Question

我有以下代码。

https://plnkr.co/edit/Tt7sWW06GG08tdJu72Fg?p=preview。请完全展开窗口以查看整个视图。

我有categories和sub-categories显示在导航栏中，如上面的plunkr所示。每个类别都有要显示的服务/子类别。

我正在使用2个嵌套ng-repeats，而内部正在使用ng-repeat的父迭代中的值。我已将函数getServicesByCategory附加到从ng-repeat调用getServicesByCategory的内部DocumentsFactory，并解析promise以返回数组对象{{1}中的数据最终应该由内部subcategories迭代。

类别显示正常，但子类别不是。

这有两个问题。

1）即可。子类别对于每个类别显示相同，并且显示的子类别属于外部ng重复迭代中的最后一个类别，即ng-repeat。相反，每个类别都应该显示它自己的子类别。

2）即可。控制台在控制台中反复显示由于尝试超过10而导致Utility Services多次错误导致这些错误http://errors.angularjs.org/1.5.6/ $ rootScope / infdig？p0 = 10＆amp; p1 =％5B％5D。方法infinite digest cycle在无限循环中被调用，触发多个摘要周期。

似乎是由Angular的getServicesByCategory和dirty checking复杂化的简单类别问题。

我读了多个帖子和帖子，建议不要在与ng-repeat相关联的函数中返回一个新对象，我不是。我将返回digest cycles的引用。

subcategories ng-repeat取决于来自inner的数据。将函数绑定到ng-repeat只是我的选择。这是正确的方法吗？获取类别和子类别的API是不同的，我没有灵活性来更改它们。我一直无法提出解决方案。只想针对每个类别选择正确的子类别。

任何帮助都将受到高度赞赏！

注意：在完整窗口中打开视图以查看左侧的导航栏。

Answer 1

这里的解决方案是获取您需要的所有数据并创建一个类别数组，每个类别都包含自己的子类别。并在嵌套的ng-repeats。

中使用此对象

请检查我的更新版本的plunker：

https://plnkr.co/edit/BaHOcI4Qa8t5CkbshyCX

如您所见，我使用：

ng-repeat="category in documents.categories"

在外部ng-repeat和：

ng-repeat="service in category.subCategories"

在内心。

在Controller中，我按以下方式构建category.subCategories：

documentsFactory
  .getCategories() // Get categories
  .then(function(response) { // Extract them from the response
    return response.data.subCategory;
  })
  .then(getSubcategories) // For every catgory, get its own subcategory
  .then(function(categories) { // Add categories to the $scope
    self.categories = categories;
  });

getSubcategories的位置：

function getSubcategories(categories) {
  console.log(categories)
  var retrievSubcategories = categories.map(function(category) { // Create a promise to get the subcategories for every category
    return documentsFactory
      .getServicesByCategory(category.name) // Get the subcategories for the given category
      .then(function(response) {
        category.subCategories = response.data.documents; // Add subgategories to the category
        return category;
      });
  });
  return $q.all(retrievSubcategories) // Return a promise resolve only when all the subcategories for every category are retrieved
}

使用带有ng-repeat的函数导致无限的摘要循环

1 个答案: