각도 CSS ngRepeat with separator between 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>

당신은 ng-repeat-start를 사용해야합니다

Answer 1

및 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

귀하의 ng-repeat 외부 separator입니다 - 사용 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>