2016-03-22 2 views
1

Je crée une ng-repeat et j'utilise un ng-model pour changer la quantité d'éléments visibles, cela fonctionne très bien. Je crée aussi une pagination en utilisant ng-click et ng-class, et voici où je vais avoir le problème.Mise à jour AngularJS portée ng-click du contrôleur

Je définir des variables dans un champ d'application de contrôleur, comme quantité limite, le total des pages, en cours pages comme ceci:

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

J'ai quelques fonctions pour aller au suivant/précédent page. Au chargement de la page, ceux-ci fonctionnent bien, mais quand je change la valeur de clientLimit, même si la valeur du contrôleur est mise à jour (en utilisant $ watch, j'appelle à nouveau la fonction getPages en utilisant la nouvelle valeur de clientsLimit) directive click les valeurs pour les pages ne sont pas modifiées. Le paramètre est de vérifier s'il s'agit du dernier/premier ou suivant/précédent.

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

C'est le 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> 

Comme je l'ai dit la ng classe et ng-clic ne reflètent pas les changements dans le périmètre du contrôleur.

Voici un plunkr avec les fichiers et les données JSON:

http://plnkr.co/edit/eVSW449vJ5cv6WWvyJhc?p=info

========================== =============

EDIT

Salut. Fondamentalement, c'est le "Je suis un idiot éditer": P. Il s'avère que j'ajoutais plus d'une instance du contrôleur, donc le select ng-model mettait juste à jour cette instance de contrôleur, alors que les autres (oui ... à un moment donné jusqu'à 3: S) maintenaient la valeur définie en cours d'exécution.

Voici un lien Plunker mis à jour avec une seule instance de contrôleur et tout fonctionne bien avec la Pagination: http://plnkr.co/edit/eVSW449vJ5cv6WWvyJhc

Répondre

0

Je vous ai regardé le code et je ne trouve pas d'import-ui angulaire, parce que vous en utilisant la pagination. Départ: https://angular-ui.github.io/bootstrap/ et exemple simple:

'http://plnkr.co/edit/xxjIBw71hDp9AHSrEhfp?p=preview 
+0

Merci Daniel !!, je vais vous donner que l'essayer. Je n'ai jamais vraiment envisagé de suivre cette voie, car la création d'un filtre personnalisé et l'ajout de certaines fonctions à l'aide de directives intégrées ne semblaient pas trop compliquées. Je n'ai jamais envisagé d'utiliser d'autres directives, car je transformerais la pagination en une directive personnalisée. – Rodrigo