Question

我正在尝试使用Angularjs通过按钮显示/隐藏我的表的某些行。请参阅所附图像作为参考。

在此表上，乍一看需要看到一些行，当我单击“显示更多”按钮时，它应该显示其余行。同样，当我单击“显示较少”按钮时，该部分需要隐藏。

如果有人能帮助我，我表示感谢。

第一眼：

First look

第二外观：

Second look

Answer 1

这是Angular JS代码

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>

Answer 2

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

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>

控制器

$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"
}]

使用Angularjs切换仅显示和隐藏某些表行

2 个答案: