Angular CSS ngRepeat 与 li 之间的分隔符答案

【问题标题】：Angular CSS ngRepeat with separator between liAngular CSS ngRepeat 与 li 之间的分隔符
【发布时间】：2017-04-29 13:07:17
【问题描述】：

我想做一个简单的自定义分页，但我不知道如何在两次 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>

【问题讨论】：

“间隔”内的html 是否会比单个span 更复杂？因为您可以使用 $last li 上的类对 CSS3 伪元素 :after 和 :before 做一些事情。

标签： javascript html css angularjs ng-repeat

【解决方案1】：

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

【讨论】：

【解决方案2】：

您应该使用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>

【讨论】：