Pagination system updates the associated model's value to 1

Is there a way to prevent the pagination control from changing the model value to 1 on initial load? You can find a Plunker showcasing this issue here.

<!DOCTYPE html>
<html>

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body ng-app="testApp" ng-controller="testCtrl">
    <pagination ng-model="currentPage"></pagination>    
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>

<script>
var testApp = angular.module('testApp', ['ui.bootstrap']);

var testCtrl = function($scope) {
    $scope.currentPage = 4;

    $scope.$watch('currentPage', function(){
        alert($scope.currentPage);
    });
}

testCtrl.$inject = ['$scope'];
testApp.controller('testCtrl', testCtrl);
</script>

</html>

Thank you.

Answer №1

It seems like the issue lies in not specifying the total number of pages. Make sure to include total-items="totalItems" in your directive, which will default to displaying 10 items per page. If you only have 10 items, it will only display one. Additionally, don't forget to set the number of items per page.

<pagination ng-model="currentPage" total-items="totalItems" items-per-page="itemsPerPage"></pagination>

var testCtrl = function($scope) {
   $scope.currentPage = 4;
   $scope.totalItems = 10;
   $scope.itemPerPage = 1;

   $scope.$watch('currentPage', function(){
    alert($scope.currentPage);
   });
 }

Check out this demo for reference: http://plnkr.co/edit/mZsBhzpA5lax883C5ihy?p=preview

Answer №2

Make sure to specify the total-items attribute when using the pagination directive:

<pagination ng-model="currentPg" total-items="ttlItems" items-per-page="itmsPerPage">     </pagination>

Next, assign the appropriate values in your controller's scope:

$scope.currentPg = 4;
$scope.ttlItems = 10; // Just an example.
$scope.itmsPerPage = 2;

Refer to the documentation for more information on the pagination directive: pagination directive docs

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

Creating a legitimate string using a function for jqGrid editoptions value: What's the best way to do it?

I am encountering an issue while trying to create a string for the editoptions value using a function. The desired string format is as follows: '1:Active;2:Inactive;3:Pending;4:Suspended'. Strangely, when I manually input this string as the value ...

What is the functionality of the "instanceof" operator in JavaScript?

When looking at the code provided, it can be seen that both checks of obj2 and obj3 at the end using instanceof return true even though they were constructed differently and have different results when returning the name property. var Obj1 = function() { ...

Waiting for a React ref to become available after being rendered in a separate container: A guide

Revised: clearer explanation The scenario: A plain HTML code is received from a third-party server, with the intention to embed in a React application make modifications to it The traditional JavaScript approach The string can be modified using reg ...

Eliminating duplicate uploads in JavaScript

Within my HTML code, there is a section where users can drag and drop files for upload. Inside this area, there is also a "browse for files" button that triggers a hidden file input if users prefer the traditional upload method. Everything functions correc ...

How come my Calendar is not showing up on the browser?

I came across a helpful guide on setting up a Calendar in HTML using JavaScript You can find it here: Unfortunately, the code I tried to use based on that guide isn't functioning as expected. <div class="row"> <div class="col-lg-4 text ...

When trying to locate an item in an array within a VUE application, it may result in

I've got this code snippet that successfully finds the item details in an array: var findGroupId = medias.find(medias => medias.group_name === this.groupName) The medias variable is an array. When I run console.log(findGroupId), I get this result ...

What could be the reason for the malfunctioning toggle button on the Bootstrap navbar?

I'm having trouble with my bootstrap navbar. I've added the .sidebar-collapse class to the body tag so that when I click on the toggle button, the data should appear on the right side. However, this isn't happening. Can anyone spot what&apos ...

Get the game using electron / determine the game's version via electron

I'm currently working on creating a game launcher using electron. There are two main questions that I have: What is the best method for downloading files from the client (specifically in AngularJS)? FTP or HTTP? How can I implement a system to detect ...

Ways to safeguard your API endpoint

Just starting out with Node.js/Express, I'm looking to have my front end retrieve data from an endpoint ('/1') without displaying the JSON data to users when they access that specific endpoint. Any guidance on how to accomplish this would be ...

Unable to access a variable declared within an anonymous function in JavaScript beyond its scope

My setup is straightforward: let genres; $.get('/api/genres', '', function (response) { genres = response.data }, 'json'); $("#genre").tagit({ availableTags: genres //this isn't functioning as expected }); I&apo ...

Styling AngularJS Pie Charts

Is it possible to customize the appearance of a pie chart created with angularjs-chart in order to achieve a design similar to this: https://i.sstatic.net/xYcu9.png While there are some examples available on the angularjs-chart website, one particular ex ...

Is there a problem with the way my animation is working?

I'm attempting to create an interactive animation where a picture disappears, appears, and moves around the page when a button is clicked. However, my picture doesn't seem to move at all when I click on the buttons. I've defined separate fun ...

How can you activate color printing in CSS when using ng-style in AngularJS?

My application generates data in a table, where each cell has a unique combination of background color and text color determined by its properties. The code to achieve this is simple: ng-style='{"background-color": lt.backgroundColor, "color": lt.te ...

Activate dropdown menu link when tapped twice on tablet devices

I am trying to implement a dropdown navigation link feature on tablets where the child menu div drops down only on the second click. This functionality already works on iPads, but on Android and Windows tablets, the link is triggered at the same time as th ...

Ten instances of $digest() being triggered upon the implementation of custom filters

I am struggling with the following angular markup: <tr ng-repeat="dia in dias"> <td>{{ dia[0].fecha }}</td> <td ng-repeat="bloque in bloques"> <div ng-repeat="hora in dia|soloBloque:bloque|sacarHoras"> ...

Preventing drag and drop functionality within the knockout js sortable feature

How can I selectively disable drag and drop on certain squares within a 5x5 grid while using the sortable feature in knockout js? Any suggestions or solutions for this specific use case? ...

make the text in em font size larger

Incorporating HTML dynamically into a page using JavaScript is shown in the example below. _strInnerHtml += "<em>" + value.cate_name + " | " + value.city_name + "</em>"; _strInnerHtml += "<a href='#' class='activi ...

The size of the search input and textarea in HTML decreases when viewed on an iPad device

Currently utilizing Bootstrap 3 and AngularJs for this project. Implementing the following markup for the input field with type 'search': <input type="search" class="form-control" id='roomSearch' placeholder="Search" ng-model=&apo ...

Enter the value into the AngularJS textbox

I am currently working on the Edit Profile page using AngularJS Typically, a list of details will be displayed. When one item in the list is clicked, a specific method is called. $scope.editContact = function(user){ $('#editContactSecti ...

Ways to retrieve the complete user object in passport

Recently, I've been diving into utilizing Express authentication with Passport and React for the frontend. While working on this project, a question came up: How can I access the entire authenticated user object? This is what my database model looks l ...