Javascript 带分页的角度嵌套重复作用域

我使用的是带材质库的angular。在项目中，我有两个嵌套的ng repeat循环和md表。问题是嵌套循环中的变量在每次请求时都是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>

因此，每个请求getBooks都会验证“books”变量，例如，现在我有两个类别，并且我看到两个类别都有相同的书籍（来自类别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)

---

您面临这个问题是因为您的

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();
  

  <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>
  

• 现在，您的HTML将如下所示：

  $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();
  

  <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>
  

  
  ...
  ...
  ...
  {{book.title}}
  ...
  

---

那应该行得通。。除非它有任何愚蠢的错误，因为没有提供可验证的示例

您应该先这样更改控制器：

 $scope.getCategories = function () {
            //get request
            $scope.categories = resp.data.rows;
            angular.forEach($scope.categories, function (category, index) {
                $scope.getBooks(category);
            });
        }();

        $scope.getBooks = function(category) {
             // make request by passing category.id.
            //get request with pagination and search params
            $scope.category = resp.data;

        };

您的HTML将如下所示：

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

...
...
...
{{book.title}}
...

您真的在

getBooks

方法上传递了

category.id

吗？是的，我在调试器中看到两个请求具有正确的

category.id