javascript - Angular 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 来创建重复的 block

<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>