angularjs - Prev/Next Item button not working within Ng-Repeat -
i'm trying build simple "pager" app allows page 1 json object next.
when adding prev/next navigation outside of repeat, works fine.
when try adding within ng-repeat, i'm trying accomplish, no longer pages through. oddly enough, can see it's doing prev/next buttons disable if you're @ beginning/end.
here's demo illustrating problem: http://embed.plnkr.co/br9bwrhdquvlv5tvmwtl/
code inside ng-repeat (top prev/next 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 outside of 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"> < 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 ></button> </li> </ul> </div> can explain how make work within ng-repeat?
ng-repeat creates new scope every row iterates over. without dot in angular bindings, primitives curpage bound scope exist in. means curpage inside each row of ng-repeat separate variables, , separate curpage value outside ng-repeat.
to ensure every instance pointing same thing, need have object property bind in parent scope.
Comments
Post a Comment