ページネーション付きの角度ネストngリピートスコープ

Question

材料libで角度を使用しています。プロジェクトでは、md-tableでng-repeatのネストループを2つ持っています。問題は、ネストされたループでは、各リクエストで毎回変数ovveridenが発生することです。私は1つのリクエストを行い、反復することができますが、私はダイナミックページネーションを持っており、動作しません。ここで

は、テーブルとインデックスファイルです：

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

は、角度コントローラの機能の簡素化：

$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 "ブック" 変数を、今例えば私は、2つのカテゴリABD Iを持っています両方のために同じ本（カテゴリ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

あなたは最後の1は、以前のすべてを上書きしてしまい反復ごとに$scope.booksを設定し、あなたのng-repeat内部ng-initを持っているので、あなたがこの問題に直面しています$scope.booksのインスタンス、代わりにng-repeat内ng-initを使用しての

• をgetCategories内の成功コールバックから直接getBooksを呼び出す：

  は、私はあなたのコードに次の変更をお勧めします。 ng-initの使用は推奨されず、また悪い習慣とみなされます。何がないので、それはどんな愚かなミスをしていない限り、正常に動作しなければならない

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

..：だから、このような何か：

$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は次のようになります。検証可能例提供

Answer 2

コントローラを最初に次のように変更する必要があります。

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