Implementing pagination within nested ng-repeat in Angular app

Question

Implementing pagination within nested ng-repeat in Angular app

I am currently utilizing Angular along with the Material library in my project. I am facing an issue with two nested ng-repeat loops within md-tables. The problem lies in the fact that the variable is getting overridden with each request in the nested loops. Although I could combine the requests and iterate through them, the dynamic pagination feature would not be functional.

Below is the index file containing the tables:

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

Here are the simplified Angular controller functions:

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

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

As a result, every request to getBooks overrides the "books" variable, causing, for example, the issue of seeing the same books (from category 2) for both categories.

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

However, I should actually have different books for Category 1:

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

javascript angularjs symfony pagination angular-material

Answer 1

Answer №1

The reason for the issue you are facing is due to the presence of an ng-init within your ng-repeat block. This causes the $scope.books to be set for each iteration, with the last one overwriting all previous instances of $scope.books.

To resolve this issue, I suggest making the following changes to your code:

Instead of using ng-init within the ng-repeat, call the getBooks function directly from the success callback inside the getCategories function. It is not recommended to use ng-init as it is considered a bad practice. Here is an example of how you can modify your code:

$scope.getBooks = function (categoryId) {
  // make a get request with pagination and search parameters
  $scope.books[categoryId] = resp.data.rows;
  $scope.booksCount[categoryId] = resp.data.amount;
}

$scope.getCategories = function () {
  // make a get request
  $scope.categories = resp.data.rows;
  $scope.books = {};
  $scope.booksCount = {};
  $scope.categories.forEach(function(category) {
    $scope.getBooks(category.id)
  })
}

$scope.getCategories();

Your HTML code should look like this after the modifications:

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

This solution should work well, unless there are any errors present in the code that were not provided for verification.

Answer 2

The reason for the issue you are facing is due to the presence of an ng-init within your ng-repeat block. This causes the $scope.books to be set for each iteration, with the last one overwriting all previous instances of $scope.books.

To resolve this issue, I suggest making the following changes to your code:

Instead of using ng-init within the ng-repeat, call the getBooks function directly from the success callback inside the getCategories function. It is not recommended to use ng-init as it is considered a bad practice. Here is an example of how you can modify your code:

$scope.getBooks = function (categoryId) {
  // make a get request with pagination and search parameters
  $scope.books[categoryId] = resp.data.rows;
  $scope.booksCount[categoryId] = resp.data.amount;
}

$scope.getCategories = function () {
  // make a get request
  $scope.categories = resp.data.rows;
  $scope.books = {};
  $scope.booksCount = {};
  $scope.categories.forEach(function(category) {
    $scope.getBooks(category.id)
  })
}

$scope.getCategories();

Your HTML code should look like this after the modifications:

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

This solution should work well, unless there are any errors present in the code that were not provided for verification.

Answer 3

Answer №2

To start, make sure to update your controller code as shown below:

 $scope.fetchCategories = function () {
            // Perform a GET request
            $scope.categoriesList = response.data.rows;
            angular.forEach($scope.categoriesList, function (category, index) {
                $scope.retrieveBooks(category);
            });
        }();

        $scope.retrieveBooks = function(category) {
             // Make a request using the category.id.
            // GET request with pagination and search parameters
            $scope.categoryData = response.data;

        };

Next, tweak your HTML structure as follows:

<div flex>
...
 <div class="content-main" ng-repeat="category in categoriesList">
...
    <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>

Answer 4

To start, make sure to update your controller code as shown below:

 $scope.fetchCategories = function () {
            // Perform a GET request
            $scope.categoriesList = response.data.rows;
            angular.forEach($scope.categoriesList, function (category, index) {
                $scope.retrieveBooks(category);
            });
        }();

        $scope.retrieveBooks = function(category) {
             // Make a request using the category.id.
            // GET request with pagination and search parameters
            $scope.categoryData = response.data;

        };

Next, tweak your HTML structure as follows:

<div flex>
...
 <div class="content-main" ng-repeat="category in categoriesList">
...
    <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>

Implementing pagination within nested ng-repeat in Angular app

Answer №1

Answer №2

Similar questions

I'm curious about the distinction between React's one-way data binding and Angular's two-way data binding. Can someone please clarify the key differences

Issues with jQuery function arising post-update to newer jQuery version

Are there equivalent npm variables like (`npm_config_`) available in yarn console scripts?

tips for efficiently loading JSON files using Angular

Crafting a robust and secure password using Yup and Formik while receiving personalized error notifications

Filter an object in Typescript and retrieve a single key

Retrieve the ID of a specific row within a table in a datatables interface by selecting the row and then clicking a button

The functionality of Angular.js route seems to be malfunctioning

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

Timeout during the beforeLoad event

Encountered an Error with My Protractor Script - Object Expected

(Is it even necessary to use a timezone library for this straightforward scenario?)

The feature of determining if an edge exists, within the dagre-d3/graphlib,

What is the process for retrieving the result of a promise at a later time?

Limit the amount of data possible to input in the HTML editor using AngularJS

Encountering 404 Error in Production with NextJS Dynamic Routes

Compatibility issues between XMLHttpRequest and curl

Issue with two Jquery slider forms

Optimizing Static File Caching in Yii

overlay appears as I reveal the slide-out menu