Question

我是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/

Answer 1

假设我已正确理解您的问题，您希望始终显示第一行和最后五行，并选择在中间切换行？如果是这样，试试这个：

<强>控制器：

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>

AngularJs表显示前5行和后5行？

1 个答案: