Angular CSS ngRepeat with li separator

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 来创建重复的块

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

Angular CSS ngRepeat with li separator

Angular CSS ngRepeat with separator between li

html

javascript

css

angularjs

ng-repeat