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行？

回答

相關問題