角CSS ngRepeat与li之间的分隔符

Question

我想进行简单的自定义分页，但是我不知道如何在两次ngRepeat迭代之间进行分隔符。 当前，分隔符位于末尾，而不位于两者之间。

 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

您应该使用ng-repeat-start和ng-repeat-end创建ng-repeat-end块

<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

您的separator在ng-repeat -如下使用ng-repeat-start和ng-repeat-end ：

 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>