使用 Angularjs 切换仅显示和隐藏部分 Table 行

Question

我正在尝试 show/hide 我的 table 的某些行使用 Angularjs 按钮。请参阅所附图片作为参考。

在此 table 上，有些行需要在第一眼看到时可见，当我单击 "Show more" 按钮时，它应该会显示其余行。当我再次点击 "Show Less" 按钮时，这部分需要隐藏。

如果有人能提供帮助，我将不胜感激。

初看：

再看：

Answer 1

您可以根据需要使用以下代码..

HTML

<table>
  <tr ng-repeat="x in dummyData track by $index" ng-hide="$index >= loadIndex">
    <td>{{x.id}}</td>
    <td>{{x.name}}</td>
    <td>{{x.status}}</td>
  </tr>
</table>
<button type="button" ng-click="showMore()" ng-if="loadIndex < dummyData .length">Show More</button>
<button type="button" ng-click="showLess()" ng-if="loadIndex >= dummyData .length">Show Less</button>

Controller

$scope.loadIndex = 6 // increment the loadindex as per yourr need       
        $scope.showMore = function() {
        // don't increment if at the end of the list
            if ($scope.loadIndex < $scope.dummyData .length) {
              $scope.loadIndex += 5;
            }
        };  
        $scope.showLess = function() {
           if ($scope.loadIndex >= $scope.dummyData .length) {
              $scope.loadIndex -= 5;
            }
        };  

$scope.dummyData = [{
    "id":1,
    "name":"abc1",
    "status":"open"
},{
    "id":2,
    "name":"abc2",
    "status":"open"
},{
    "id":3,
    "name":"abc3",
    "status":"open"
},{
    "id":4,
    "name":"abc4",
    "status":"open"
},{
    "id":5,
    "name":"abc5",
    "status":"open"
},{
    "id":6,
    "name":"abc6",
    "status":"open"
},{
    "id":7,
    "name":"abc7",
    "status":"open"
},{
    "id":8,
    "name":"abc8",
    "status":"open"
},{
    "id":9,
    "name":"abc9",
    "status":"open"
},{
    "id":10,
    "name":"abc10",
    "status":"open"
}]

Answer 2

This is Angular JS Code

var app=angular.module("myApp",[]);
 app.controller("tableCtrl",function($scope){
   $scope.showhide=function(){//initial limit is 4 you cange it here
   if($scope.showless){$scope.limit=4; $scope.text="Show More";}
   else{ $scope.limit=$scope.tableData.length; $scope.text="Show Less";}
$scope.showless=!$scope.showless;
  }

  $scope.limit=4;
  $scope.showless=true;

//example 10 rows
$scope.tableData=[{th:"th",td1:"td",td2:"td",td3:"td"},
     {th:"th",td1:"td",td2:"td",td3:"td"},
     {th:"th",td1:"td",td2:"td",td3:"td"},
     {th:"th",td1:"td",td2:"td",td3:"td"},
     {th:"th",td1:"td",td2:"td",td3:"td"},
     {th:"th",td1:"td",td2:"td",td3:"td"},
     {th:"th",td1:"td",td2:"td",td3:"td"},
     {th:"th",td1:"td",td2:"td",td3:"td"},
     {th:"th",td1:"td",td2:"td",td3:"td"},
     {th:"th",td1:"td",td2:"td",td3:"td"}];

     $scope.showhide();
  });

 
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="myApp">
    <div ng-controller="tableCtrl">
        <table border="2" style="border-color: red">
            <tbody>
                <tr ng-repeat="x in tableData|limitTo:limit">
                    <th>{{x.th}}</th>
                    <td>{{ x.td1 }}</td>
                    <td>{{ x.td2 }}</td>
                    <td>{{ x.td3}}</td>
                </tr>
                <tr>
                    <td colspan="4"><button ng-click="showhide()" style="width: 100%">{{text}}</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    </body>
    </html>

使用 Angularjs 切换仅显示和隐藏部分 Table 行

Toggle Show And Hide Only Some Table Rows using Angularjs

hidden

row

html-table

show

angularjs