javascript - 带分页的 Angular 嵌套 ng 重复范围

Question

我正在使用带有 Material 库的 Angular 。在项目中，我有两个带有 md-tables 的 ng-repeat 嵌套循环。问题是，在嵌套循环中，每次请求时变量都是 ovveriden。我可以提出一个请求并进行迭代，但我有动态分页，它不会工作。

这是带有表格的索引文件:

<div ng-init="getCategories()" flex>
...
 <div class="content-main"  ng-repeat="category in categories">
...
    <md-content>
        <table md-table ng-init="getBooks(category.id)">
           ...
           <tr md-row ng-repeat="book in books | orderBy: query.order ">
                <td md-cell>
                    <span>{{ book.title }}</span>
                </td>
    ...
    </md-content>
    <md-table-pagination md-limit="query.limit"
                         md-limit-options="limit"
                         md-page="query.page"
                         md-page-select="options.pageSelect"
                         md-total="{{booksCount}}"
                         md-boundary-links="options.boundaryLinks">
    </md-table-pagination>

简化的 Angular Controller 功能:

$scope.getCategories = function () {
 \\get request
  $scope.categories = resp.data.rows;
  }

$scope.getBooks = function () {
 \\get request with pagination and search params
   $scope.books = resp.data.rows;
   $scope.booksCount = resp.data.amount;
  }

所以每个请求 getBooks ovverides“书籍”变量，现在例如我有两个类别 abd 我看到相同的书籍(来自类别 2)。

Category 1
 Book C Book D
Category 2 
 Book C Book D
(wrong)

但我有另一本书的第 1 类:

Category 1
 Book A Book B
Category 2 
 Book C Book D
 (correct)

Answer 1

您遇到此问题是因为您的 ng-repeat 中有一个 ng-init，它为每次迭代设置 $scope.books最后一个最终会覆盖 $scope.books 的所有先前实例。

我建议对您的代码进行以下更改:

• 不是在 ng-repeat 中使用 ng-init，而是直接从 getCategories 中的成功回调调用 getBooks 。不鼓励使用 ng-init，这也被认为是不好的做法。所以，像这样:

  $scope.getBooks = function (categoryId) {
    // get request with pagination and search params
    $scope.books[categoryId] = resp.data.rows;
    $scope.booksCount[categoryId] = resp.data.amount;
  }
  
  $scope.getCategories = function () {
    //get request
    $scope.categories = resp.data.rows;
    $scope.books = {};
    $scope.booksCount = {};
    $scope.categories.forEach(function(category) {
      $scope.getBooks(category.id)
    })
  }
  
  $scope.getCategories();
  

• 现在您的 HTML 看起来像这样:

  <div flex>
  ...
  <div class="content-main" ng-repeat="category in categories">
  ...
    <md-content>
      <table md-table>
      ...
        <tr md-row ng-repeat="book in books[category.id] | orderBy: query.order">
          <td md-cell>
              <span>{{ book.title }}</span>
          </td>
          ...
    </md-content>
  

那应该可以正常工作..除非它有任何愚蠢的错误，因为没有提供可验证示例