AngularJS update ng-klicken Sie auf Scope von Controller

Question

Ich erstelle eine ng-Wiederholung und mit einem ng-Modell die Menge der Elemente, die sichtbar sind, ändern, das funktioniert gut. Außerdem erstelle ich eine Seitennummerierung mit ng-click und ng-class, und hier habe ich das Problem.

ich definieren einige Variablen in einem Umfang des Controllers, wie Menge Limit, Gesamtseiten, strom Seite wie folgt aus:

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

Dann habe ich einige Funktionen zum nächsten/vorherigen gehen Seite. Beim Laden der Seite funktioniert das gut, aber wenn ich clientsLimit-Menge ändere, obwohl der Bereichswert des Controllers aktualisiert wird (benutze $ watch, rufe ich die getPages-Funktion erneut mit dem neuen Wert von clientsLimit auf), aber wenn ich auf die Schaltflächen klicke click-Anweisung Die Werte für Seiten werden nicht geändert. Der Parameter ist zu prüfen, ob dies die letzten/ersten oder nächsten/vorherigen Tasten sind.

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

Dies ist die 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> 

Wie gesagt die ng-Klasse und ng-Klick werden die Änderungen in der Steuerung Umfang nicht widerspiegelt.

Hier ist ein plunkr mit den Dateien und die JSON-Daten:

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

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

EDIT

Hallo. Im Grunde ist dies der "Ich bin ein Idiot bearbeiten": P. Es stellte sich heraus, dass ich mehr als eine Instanz des Controllers hinzufügte. Daher hat das Select-Modell nur diese Controller-Instanz aktualisiert, während die anderen (ja ... zu einem bestimmten Zeitpunkt beinhaltete ich bis zu 3: S) den gesetzten Wert beibehalten haben zur Laufzeit.

Hier ist eine aktualisierte Plunker Verbindung mit nur einem Controller-Instanz und alles funktioniert ok mit der Paginierung: http://plnkr.co/edit/eVSW449vJ5cv6WWvyJhc

Answer 1

ich dich Code sah und ich habe nicht Importwinkel-ui, weil Sie Paginierung verwenden. Check out: https://angular-ui.github.io/bootstrap/ und einfaches Beispiel:

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