The value of $index remains constant for every page that utilizes dir-paginate

Currently, I am utilizing the dirPaginate directive to handle pagination within my Angular application. While it is functioning correctly overall, I have encountered an issue where each page displays 10 records but the $index values are not incrementing as expected. Instead of showing ranges like 11-20, 21-30, and so on for subsequent pages, it continues with 1-10. Can someone assist me in resolving this matter? Below is a snippet of my code:

<tbody dir-paginate="wagedtl in listWagemasterdtls | orderBy:orderByField:reverseSort | filter : detailsfilter |itemsPerPage:10">
<tr><td class="hidden-xs">{{ wagedtl.wageTypeMstrID}}</td><td>{{wagedtl.wageTypeMstrNm}}</td></tr> 
<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true"></dir-pagination-controls>
javascriptangularjspaginationdirpagination

Answer №1

Understanding the inner workings of ng-repeat, as utilized by dir-paginate, is crucial. It may be more logical for it to range from 0 to 9 rather than 1 to 10.

To accurately determine the index across pages, one can employ the current-page attribute to assign the current page to a variable.

<tbody dir-paginate="..." current-page="currentPage">

Then this variable can be utilized within the template:

$index + currentPage * 10

https://github.com/michaelbromley/angularUtils/blob/master/src/directives/pagination/README.md

Answer №2

My approach worked perfectly. I created a function that triggers on page change using the on-page-change event of dir-pagination-controls and passed 'newPageNumber'.

<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true" on-page-change='indexCount(newPageNumber)'></dir-pagination-controls>

In the controller, I implemented this logic in a custom function:

$scope.indexCount = function(newPageNumber){
    $scope.serial = newPageNumber * 10 - 9;
}

I then linked 'serial' with $index in the HTML:

<td>{{ $index + serial}}</td>

If 'newPageNumber' is undefined by default, I set the initial value of 'serial' to 1 at the start of the controller.

$scope.serial = 1;

It may not be the most efficient solution, but it worked for me...:D

Answer №3

update the item per page value using a variable in the scope.

<tr dir-paginate="item in allProductData" itemsPerPage:itemPerPage">

create a new function within on-page-change.

 <dir-pagination-controls max-size="5" on-page-change='indexCount(newPageNumber)'
                                                 direction-links="true"
                                                 boundary-links="true">
 </dir-pagination-controls>

implement this function in your JavaScript file:

$scope.serial = 1;
$scope.itemPerPage=5
$scope.indexCount = function(newPageNumber){
  $scope.serial = newPageNumber * $scope.itemPerPage - ($scope.itemPerPage-1);
}

You have the option to adjust the value of itemsPerPage by updating the $scope.itemPerPage variable.

That's it. Your page index will now update seamlessly as you navigate through pages.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we show a varying number of textfields based on user selection using hooks and updating values dynamically through onChange events?

Currently, I am in the process of setting up a form that includes a Material UI select field ranging from 1 to 50. My challenge is how to dynamically display multiple textfields for "First Name and Last Name" using Hooks each time the user selects a number ...

javascriptreactjsmaterial-uireact-hooks

Using Javascript to dynamically add form fields based on the selection made in a combo box

I am in the process of creating an information submission page for a website, where various fields will need to be dynamically generated based on the selection made in a combo box. For example, if the user selects "2" from the combo box, then two addition ...

phpjavascripthtmlvalidation

Apply CSS styles to a group of elements retrieved from an object

How can I apply CSS properties to each element in a collection using jQuery? const cssProperties = { "color": "#555555", "font-weight": "bold", "text-align": "left" }; const $tdCollection = $("tr:first-child").find("td:nth-child(2)"); // Co ...

javascriptjquerycss

jQuery smoothly sliding downward from the top to the bottom

http://jsfiddle.net/Hx65Q/3/ Is there a way to make the slider open from the top instead of the left side? $("button" ).click(function() { $('.login').toggle('slide', { duration: 1000, easing: 'easeOutBounce', }); ...

javascriptjquerycss

Which Angular component, directive, or pipe would be best suited for creating dynamic HTML content similar to this?

(I am transitioning from React to Angular, so please bear with me if my question has a hint of React influence.) I am in need of developing an Angular component that can accept a string along with a list of terms within that string for displaying tooltips ...

javascriptangular

Utilizing jQuery for various dynamically generated HTML elements

I am currently working on a form for editing data in my database. The form consists of three dropdowns: Category, Subcategory, and Item. These dropdowns are dynamically populated based on the selection made in the previous dropdown. After all three dropdow ...

javascriptphpjqueryhtml

Creating CSS for a specific class on a single webpage can be achieved by targeting that class

Here is my custom style: <style> ul { padding:0 0 0 0; margin:0 0 0 0; } ul li { list-style:none; margin-bottom:25px; } ul li img { cursor: poin ...

javascriptjqueryhtmlcss

Bypassing directive's internal controller when compiling with ng-include in AngularJS

Is it possible to create a directive with multiple templates like the example on this Stack Overflow post? In the case of using compile in a directive, such as shown in this JSFiddle demo, the ng-include utilizes an external controller and the internal co ...

angularjsangularjs-directive

How to use ngTouch service within an AngularJS directive?

Recently, I have been impressed with the new functionality of the ng-click directive in Angular that now includes touch events. However, I am curious if it is possible to utilize this touch-event service within my own custom directive. Many of my directive ...

angularjs

The server is receiving empty values from the Ajax post

I'm attempting to extract an image file from a base64 string received from the client side. Here is the ajax post I'm using: $.ajax({type: "POST", url: "upload_post.php", data: postData, dataType: "text", success: function(result){ ale ...

javascriptphpjqueryajaxbase64

Is it possible to refresh the Dictionary using data from localStorage?

I attempted to retrieve all key/value pairs from the localStorage and use them to update my dictionary named keywordDict in the following manner: $(document).ready(function() { var store = allStorage(); console.log(store); $.ajax({ url: '/m ...

javascriptpythondictionary

Exploring the characteristics of $scope elements generated by the $resource factory service within AngularJS

I need to access attributes of an object that originates from a $resource factory service (REST API). services.js: myApp.factory('userService', ['$resource', 'backendUrl', function($resource, backendUrl) { return $resource ...

javascriptangularjs

Tips on resolving JavaScript's failure to adjust to the latest HTML inputs

I'm working on a homepage where users can choose their preferred search engine. The issue I'm facing is that even if they switch between search engines, the result remains the same. I've experimented with if-then statements, but the selecti ...

javascripthtml

Invoke the REST API and save the compressed file onto the local machine

This is the code snippet I currently have: jQuery.ajax({ type: "GET", url: "http://localhost:8081/myservicethatcontainsazipfile", contentType:'application/zip', success: function (response) { console.log("Successful ...

javascriptjqueryajax

Retrieving and transforming data from a JSON format using Regular Expressions

Hello there, I have a task that requires extracting data from the token_dict object received through the api and converting it. Here's an example: "token_dict": { "0x13a637026df26f846d55acc52775377717345c06": { "chain&qu ...

javascriptjqueryjson

Obtaining a complex object from a Checkbox set in AngularJS through the use of ngModel

Hey there! I've been searching on Stack Overflow regarding this topic, but I haven't found a solution that matches exactly what I need. If you want to take a look at the code, here is a JSFiddle link for reference: http://jsfiddle.net/gsLXf/1/ ...

javascriptangularjscheckboxangular-ngmodel

What is the best way to keep vue-meta up to date when the route or URL

The issue I am facing is that the meta data on my website does not update when the route changes. Even though the route has a watch function that updates the view correctly, the metaInfo() method from vue-meta fails to keep up with the changes. Below is an ...

javascriptvue.jsvuejs2vue-routervue-meta

Manipulating the DOM in AngularJS Directives without relying on jQuery's help

Let's dive right in. Imagine this as my specific instruction: appDirectives.directive('myDirective', function () { return{ restrict: 'A', templateUrl: 'directives/template.html', link: functio ...

javascriptjqueryhtmlcssangularjs

Ensure that you do not proceed with the next step until the promise has been fulfilled

I am currently faced with a challenge in my project where I have a service that wraps a 3rd-party API to retrieve data into my controller. However, I need to perform some data processing to pivot the information before displaying it, but I am struggling to ...

javascriptangularjspromise

use JavaScript to create indentation on the following line

I'm currently utilizing Komodo IDE 8.5. I've been attempting to indent my code to the next line in order to prevent it from extending too far to the right. However, every time I try to indent, it breaks the line and doesn't register properl ...

javascriptkomodo