AngularJs 상위 5 개 및 아래쪽 5 개 행이 표시된 테이블?

-1

Angularjs에 처음 왔으며 모든 레코드를 보여주는 모든 기능을 클릭하는 사이에 5 번과 5 번 행을 표시하려고합니다. 나는 여러 가지 일을 시도했지만 성공하지 못했습니다.AngularJs 상위 5 개 및 아래쪽 5 개 행이 표시된 테이블?

  <div class="col-md-12"> 
      <div class="dataTables_wrapper" id="comparison-table"> 
      <table class="datatable"> 
       <thead> 
       <tr> 
        <th width="5%">A</th> 
        <th width="10%">B</th> 
        <th width="25%" class="text-left">C</th> 
        <th width="15%">D</th> 
        <th width="15%">E</th> 
        <th width="15%">F</th> 
        <th width="15%">G</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td>1</td> 
        <td>##</td> 
        <td class="text-left">AA</td> 
        <td>12</td> 
        <td>12</td> 
        <td>2</td> 
        <td>4</td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>##</td> 
        <td class="text-left">BB</td> 
        <td>12</td> 
        <td>11.7</td> 
        <td>1</td> 
        <td>2</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>##</td> 
        <td class="text-left">CC</td> 
        <td>12</td> 
        <td>11.7</td> 
        <td>1</td> 
        <td>2</td> 
       </tr> 
       <tr> 
        <td>4</td> 
        <td>##</td> 
        <td class="text-left">DD</td> 
        <td>11.7</td> 
        <td>10.7</td> 
        <td>9</td> 
        <td>3</td> 
       </tr> 
       <tr> 
        <td>5</td> 
        <td>##</td> 
        <td class="text-left">EE</td> 
        <td>12</td> 
        <td>10.4</td> 
        <td>3</td> 
        <td>9</td> 
       </tr> 
       <tr> 
        <td class="text-center br" colspan="7"> <a href="#">Click to view all</a></td> 
       </tr> 
       <tr> 
        <td>32</td> 
        <td>##</td> 
        <td class="text-left">FF</td> 
        <td>12</td> 
        <td>12</td> 
        <td>2</td> 
        <td>4</td> 
       </tr> 
       <tr> 
        <td>33</td> 
        <td>##</td> 
        <td class="text-left">GG</td> 
        <td>12</td> 
        <td>11.7</td> 
        <td>1</td> 
        <td>2</td> 
       </tr> 
       <tr> 
        <td>34</td> 
        <td>##</td> 
        <td class="text-left">HH</td> 
        <td>12</td> 
        <td>11.7</td> 
        <td>1</td> 
        <td>2</td> 
       </tr> 
       <tr> 
        <td>35</td> 
        <td>##</td> 
        <td class="text-left">II</td> 
        <td>11.7</td> 
        <td>10.7</td> 
        <td>9</td> 
        <td>3</td> 
       </tr> 
       <tr> 
        <td>36</td> 
        <td>##</td> 
        <td class="text-left">JJ</td> 
        <td>12</td> 
        <td>10.4</td> 
        <td>3</td> 
        <td>9</td> 
       </tr> 
       </tbody> 
      </table> 
      </div>

단지 데모 목적을 위해 바이올린을 찾아보세요 - http://jsfiddle.net/samirshah1187/Br28J/

출처

2014-01-17 Samir Shah

첫 번째 문장은 매우 혼란을. 다시 말해봐. – Stewie

행을 전환 할 수있는 옵션과 함께, 당신은 첫 번째와 마지막 다섯 개 행이 항상 볼 수 싶어, 내가 제대로 질문을 이해 가정 사이? 그렇다면,이 시도 :

컨트롤러 :

function MyCtrl($scope) { 
    // Create Test Array 
    $scope.myArray = Array.apply(null, {length: 20}).map(Number.call, Number) 
    $scope.hideRows = true 

    $scope.toggleHiddenRows = function() { 
     $scope.hideRows = !$scope.hideRows 
    } 
}

보기 :

<body ng-controller="MyCtrl"> 
    <table> 
    <tr ng-repeat="value in myArray" ng-hide="hideRows && $index > 4 && $index < (myArray.length - 5)"> 
     <td>Row: {{value}}</td> 
    </tr> 
    </table> 
    <button ng-click="toggleHiddenRows()">Toggle Hidden Rows</button> 
</body>

출처

2014-01-17 13:16:55 scarlz

감사합니다. 이것에 대한 지시문을 작성하는 것이 내 마음 속에 있었지만 확실하지는 않았습니다. 너 내 질문을 해결 했어. –

이것에 대한 지침이 없어도 될까요? –

AngularJs 상위 5 개 및 아래쪽 5 개 행이 표시된 테이블?

답변

관련 문제