Prev/Next Button funktioniert nicht in Ng-Repeat

Question

Ich versuche eine einfache "Pager" -App zu erstellen, mit der Sie von einem JSON-Objekt zum nächsten springen können.

Beim Hinzufügen der vorherigen/nächsten Navigation außerhalb der Wiederholung funktioniert es gut.

Wenn ich versuche, es innerhalb der ng-Wiederholung, die ich letztlich zu erreichen versuche, es nicht mehr Seiten durch. Seltsamerweise kann ich sehen, dass es etwas unternimmt, da die Tasten prev/next deaktiviert werden, wenn Sie am Anfang/Ende sind.

Hier ist illustriert Demo das Problem: http://embed.plnkr.co/bR9BwrhDquvLV5TVMWtL/

Code in ng-repeat (Top Zurück/Weiter Buttons):

<div class="a2a-accounts" ng-show="accounts.length"> 
    <div class="btn-group" role="toolbar" aria-label="First group"> 
     <a href="#" class="btn btn-link" ng-disabled="curPage == 0" ng-click="curPage=curPage-1"><i class="fa fa-chevron-left fa-2x"></i> Prev </a> 
     <a href="#" class="btn btn-link" ng-disabled="curPage >= accounts.length/pageSize - 1" ng-click="curPage = curPage+1"><i class="fa fa-chevron-right fa-2x"></i> Next </a> 
    </div> 
</div> 

-Code außerhalb von ng-repeat (Bottom Prev/Next Buttons):

<div class="pagination pagination-centered" ng-show="accounts.length"> 
    <ul class="pagination-controle pagination"> 
     <li> 
      <button type="button" class="btn btn-primary btn-block" ng-disabled="curPage == 0" ng-click="curPage=curPage-1"> &lt; PREV</button> 
     </li> 
     <li> 
      <span>Page {{curPage + 1}} of {{ numberOfPages() }}</span> 
     </li> 
     <li> 
      <button type="button" class="btn btn-primary btn-block" ng-disabled="curPage >= accounts.length/pageSize - 1" ng-click="curPage = curPage+1">NEXT &gt;</button> 
     </li> 
    </ul> 
</div> 

Kann jemand erklären, wie dies innerhalb der ng-Wiederholung funktioniert?

Answer 1

ng-repeat erstellt einen neuen Bereich für jede Zeile, die durchlaufen wird. Ohne einen Punkt in Ihren eckigen Bindungen werden Grundelemente wie curPage an den Bereich gebunden, in dem sie existieren. Das bedeutet, dass die curPage innerhalb jeder Zeile der ng-repeat separate Variablen sind und auch getrennt von curPage Wert außerhalb der ng-repeat.

Um sicherzustellen, dass jede Instanz auf dasselbe Objekt verweist, müssen Sie über eine Objekteigenschaft verfügen, an die Sie im übergeordneten Bereich binden.

http://plnkr.co/edit/VMrRqJxndVqIfkPAIMZf?p=preview