Angular CSS ngRepeat with separator between li

Question

I want to make a simple custom pagination, but I do not know how to do separators between two iterations of ngRepeat. Currently the separators are at the end and not between.

 function Controller($scope) { $scope.currentPage = 1; $scope.totalPages = 2; $scope.itemPerPage = 12; $scope.getPages = function () { return new Array($scope.totalPages); }; $scope.pageChange = function (page) { if(isNaN(page)) { if((page == "-" && 1 < $scope.currentPage) || (page == "+" && $scope.currentPage < $scope.totalPages)) { $scope.currentPage = eval($scope.currentPage + page + 1); } } else { $scope.currentPage = page; } }; } 

 ul { list-style: none; display: inline-block; vertical-align: middle; margin-bottom: 0; } li { display: inline-block; vertical-align: middle; margin: 0 -1px; } a.active { background: #31a445; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="" ng-controller="Controller"> <ul> <li ng-repeat="page in getPages() track by $index"> <a href="" ng-click="pageChange($index + 1)" ng-class="{active: currentPage == $index + 1}">{{$index + 1}}</a> </li> <li ng-hide="$last" class="paging-spacer"><span>-</span></li> </ul> </div> 

Answer 1

You should use ng-repeat-start and ng-repeat-end to create block that is repeated

<li ng-repeat-start="page in getPages() track by $index">
   <a href="" ng-click="pageChange($index + 1)" ng-class="{active: currentPage == $index + 1}">{{$index + 1}}</a>
</li>
<li ng-hide="$last" ng-repeat-end class="paging-spacer"><span>-</span></li>

Answer 2

Your separator is outside the ng-repeat - use ng-repeat-start and ng-repeat-end as below:

 function Controller($scope) { $scope.currentPage = 1; $scope.totalPages = 2; $scope.itemPerPage = 12; $scope.getPages = function() { return new Array($scope.totalPages); }; $scope.pageChange = function(page) { if (isNaN(page)) { if ((page == "-" && 1 < $scope.currentPage) || (page == "+" && $scope.currentPage < $scope.totalPages)) { $scope.currentPage = eval($scope.currentPage + page + 1); getProducts(); } } else { $scope.currentPage = page; getProducts(); } }; } 

 ul { list-style: none; display: inline-block; vertical-align: middle; margin-bottom: 0; } li { display: inline-block; vertical-align: middle; margin: 0 -1px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="" ng-controller="Controller"> <ul> <li ng-repeat-start="page in getPages() track by $index"> <a href="" ng-click="pageChange($index + 1)" ng-class="{active: currentPage == $index + 1}">{{$index + 1}}</a> </li> <li ng-hide="$last" class="paging-spacer"><span>-</span> </li> <li ng-repeat-end></li> </ul> </div>