2016-03-16 2 views
0

У меня есть эта скрипку: http://jsfiddle.net/tbuchanan/eqtxLkbg/4/AngularJS - пагинация - добавить активный класс текущей страницы

У меня есть функциональность мне нужно работает, за исключением того, что мне нужно добавить активный класс текущей страницы при езде на велосипеде по страницам:

<ul class="pagination-controle pagination"> 
    <li> 
     <button type="button" class="btn btn-default" ng-hide="curPage == 0" 
     ng-click="curPage = curPage-1"> &lt; PREV</button> 
    </li> 
    <li> 
     <span ng-click="curPage = curPage - 2" ng-hide="curPage < datalists.length/pageSize - 1">{{curPage - 1}}</span> 
     <span ng-click="curPage = curPage - 1" ng-hide="curPage === 0">{{curPage}}</span> 
     <span>{{curPage + 1}}</span> 
     <span ng-click="curPage = curPage + 1" ng-hide="curPage >= datalists.length/pageSize - 1">{{curPage + 2}}</span> 
     <span ng-click="curPage = curPage + 2" ng-hide="curPage >= datalists.length/pageSize - 2">{{curPage + 3}}</span> 
     <span ng-click="curPage = curPage + 3" ng-hide="curPage !== 0 ">{{curPage + 4}}</span> 
    </li> 
    <li> 
     <button type="button" class="btn btn-default" 
     ng-hide="curPage >= datalists.length/pageSize - 1" 
     ng-click="curPage = curPage+1">NEXT &gt;</button> 
    </li> 
</ul> 

enter image description here

Может кто-нибудь помочь мне достичь этого?

+0

есть угловая бутстрап. если вы все еще хотите использовать свои собственные, вы можете посмотреть, как реализован активный класс и имитировать его в вашем контроллере. http://angular-ui.github.io/bootstrap/#/pagination – alsafoo

+0

@alsafoo я проверю. спасибо – user3361996

ответ

0

Таким образом, на основе существующей логики оказывается, что первый видимый диапазон всегда является текущей страницей. Поэтому я могу просто применять активный класс к этому элементу все время. Обновленная скрипка: http://jsfiddle.net/tbuchanan/eqtxLkbg/5/

<span class="active pagination-button">{{curPage + 1}}</span> 
Смежные вопросы