Angulaire CSS ngRepeat avec séparateur entre li

Question

Je veux faire une simple pagination personnalisée, mais je ne sais pas comment faire des séparateurs entre deux itérations de ngRepeat. Actuellement, les séparateurs sont à la fin et non entre.

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

Vous devez utiliser ng-repeat-start et ng-repeat-end pour créer le bloc qui se répète

<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

Votre separator est en dehors de la ng-repeat - utiliser ng-repeat-start et ng-repeat-end comme ci-dessous:

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>