角型CSS ngRepeat with separator between li

Question

単純なカスタムページネゴシエーションを行いたいが、ngRepeatの2つの繰り返しの間にセパレータを行う方法はわからない。 現在、セパレータは最後と最後の間にあります。

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

あなたは

<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-startとng-repeat-endを使用する必要があります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>