Immortalised on my blog here: http://www.codesleuth.co.uk/2016/01/Semantic-UI-Template-for-Paginate-Almost-anything/
This is a template for Paginate (Almost) Anything using Semantic UI. The original dirPagination.tpl.html is written with bootstrap themes.
<div class="ui pagination menu" ng-if="1 < pages.length || !autoHide">
<a class="icon item" ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }" href="" ng-click="setCurrent(1)">
<i class="angle double left icon"></i>
</a>
<a class="icon item" ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }" href="" ng-click="setCurrent(pagination.current - 1)">
<i class="left chevron icon"></i>
</a>
<a class="item" ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }" href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>
<a class="icon item" ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }" href="" ng-click="setCurrent(pagination.current + 1)">
<i class="right chevron icon"></i>
</a>
<a class="icon item" ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == pagination.last }" href="" ng-click="setCurrent(pagination.last)">
<i class=" angle double right icon"></i>
</a>
</div>
To use this new template, drop it into your project and reference it using the template-url
attribute:
<dir-pagination-controls template-url="path/to/dirPagination.tpl.html"></dir-pagination-controls>
Looks like http://www.codesleuth.co.uk/2016/01/Semantic-UI-Template-for-Paginate-Almost-anything/ has a 404 error?