Я создаю ng-repeat и использую ng-модель, изменяя количество видимых элементов, это работает нормально. Также я создаю разбиение на страницы с помощью ng-click и ng-class, и вот здесь у меня возникла проблема.
Я определяю некоторые переменные в области действия контроллера, такие как лимит количества, общее количество страниц, текущая страница, например:
// definitions
$scope.clients;
$scope.clientsAmount;
// amount of visible clients
$scope.limitArray = [8,12,16];
$scope.clientsLimit = 8;
// function to get the amount of pages
function getPages(els, limit) {
// get the total pages considrering the amount of elements
$scope.totalPages = Math.ceil(els/limit);
$log.log( 'get - total => ', $scope.totalPages );
}
Затем у меня есть некоторые функции для перехода на следующую/предыдущую страницу. При загрузке страницы они работают нормально, но когда я меняю сумму clientLimit, даже если значение области действия контроллера обновляется (используя $watch, я снова вызываю функцию getPages, используя новое значение clientLimit), но когда я нажимаю кнопки с помощью ng- click значения для страниц не изменяются. Параметр должен проверить, является ли это последней/первой или следующей/предыдущей кнопками.
// NEXT BUTTON
$scope.nextBtn = function(param){
$log.log( 'value => ', value );
// check if this is not the last page and the param is true
// go to the next page
if( $scope.currentPage !== $scope.totalPages && param ) {
$scope.currentPage++;
} else if (!param) {
$scope.currentPage = $scope.totalPages;
}// conditional end
};// next button end
// PREVIOUS BUTTON
$scope.prevBtn = function(param){
// check if this is not the first page and the param is true
// go to the preivious page
if( $scope.currentPage !== 1 && param ) {
$scope.currentPage--;
} else if ( !param ) {
$scope.currentPage = 1;
}// conditional end
};// previous button end
Это HTML
<li ng-class="firstPageCheck()">
<a href aria-label="First" ng-click="prevBtn(false)">
<span aria-hidden="true">First</span>
</a>
</li>
<li ng-class="firstPageCheck()">
<a href aria-label="Previous" ng-click="prevBtn(true)">
<span aria-hidden="true">Previous</span>
</a>
</li>
<li ng-class="lastPageCheck()">
<a href aria-label="Next" ng-click="nextBtn(true, value=totalPages)">
<span aria-hidden="true">Next</span>
</a>
</li>
<li ng-class="lastPageCheck()">
<a href aria-label="Last" ng-click="nextBtn(false, value=totalPages)">
<span aria-hidden="true">Last</span>
</a>
</li>
Как я уже сказал, ng-class и ng-click не отражают изменения в области действия контроллера.
Вот plunkr с файлами и данными JSON:
http://plnkr.co/edit/eVSW449vJ5cv6WWvyJhc?p=info
=======================================
ИЗМЕНИТЬ
Привет. По сути, это "Я идиот, редактировать": P. Оказывается, я добавлял более одного экземпляра контроллера, поэтому выбранная ng-модель обновляла только этот экземпляр контроллера, в то время как другие (да... в какой-то момент я включил до 3: S) сохраняли установленное значение во время выполнения.
Вот обновленная ссылка Plunker только с одним экземпляром контроллера, и все работает нормально с нумерацией страниц: http://plnkr.co/edit/eVSW449vJ5cv6WWvyJhc