Блог

Главная - Вопросы по программированию - Элемент управления нумерацией страниц изменяет значение модели, к которой он привязан, на 1

Элемент управления нумерацией страниц изменяет значение модели, к которой он привязан, на 1

#javascript #angularjs #twitter-bootstrap #pagination

#javascript #angularjs #twitter-bootstrap #разбивка на страницы

Вопрос:

Как показано в приведенном ниже коде, наличие элемента управления нумерацией страниц (из угловых директив для библиотеки начальной загрузки) изменяет значение модели на 1 при начальной загрузке, есть ли какой-либо способ обойти это? Я добавил сюда плунжер.

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

Спасибо

Комментарии:

1. можете ли вы опубликовать демонстрацию, демонстрирующую вашу проблему. согласно документам и этому плунжеру, он работает так, как вы ожидаете, устанавливая для текущей страницы значение 4: plnkr.co/edit/mBJMyohp1JQI3LBqRLkr?p=preview

2. Приведенный выше код является полной демонстрацией, но я скопирую его в plunkr для удобства

Ответ №1:

Я считаю, что проблема в том, что вы не указываете общее количество страниц. Попробуйте добавить total-items="totalItems" в свою директиву, и директива по умолчанию имеет значение 10 элементов на страницу. Если у вас есть только 10 элементов, он будет отображать только 1. Вам также необходимо установить количество элементов на странице.

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

Вот демонстрация: http://plnkr.co/edit/mZsBhzpA5lax883C5ihy?p=preview

Комментарии:

1. К сожалению, все то же самое, у меня было это изначально (в моем фактическом производственном коде) и я удалил его для целей примера, поскольку это не имело никакого значения

2. Странно, отлично работает на плунжере с почти идентичным кодом. Если я оставлю общее количество элементов, оно просто покажет 1.

3. Aah в моем коде продукта я загружаю итоговые элементы динамически, после поиска, поэтому изначально он равен null, ваш ответ правильный

Ответ №2:

Вам необходимо установить атрибут total-items для разбивки директивы на страницы :

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

Затем вам нужно установить соответствующие свойства в области вашего контроллера :

 $scope.currentPage = 4;
$scope.totalItems = 10; // For example.
$scope.itemsPerPage = 2;

Вы можете найти все подробности в документации для директивы разбивки на страницы

Метки: