Toggle Show And Hide Only Some Table Rows using Angularjs

Question

I am trying to show/hide some rows of my table with a button using Angularjs. Please see attached images as your reference.

On this table some rows needs to be visible at the first look, when I click on "Show more" button it should show the rest of the rows. Again when I click on the "Show Less" button this part needs to be hidden.

I appreciate if anyone could help.

First look:

First look

Second look:

Second look

Hi Andrew, I need to do it with Angularjs. But I do not know how! I am thinking to write a function to count the row numbers if possible, then based on that status it will toggle the Show/Hide button. — Mina, Aug 02 '18 at 06:28

score 1 · Accepted Answer · answered Aug 02 '18 at 06:43

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>

Thank you so much ArunKumarmn, for the reply. My question is how I can modify my **tableData** here? Cause I need to fill my cell with something like this: Difference{{scenarioSummary.difference === 0 ? null : (scenarioSummary.difference | currency : '$' : '0')}} — Mina, Aug 08 '18 at 06:44
can you share your code with JSfiddle or something like that. So that i can edit — ArunKumar M N, Aug 08 '18 at 07:11

score 0 · Answer 2 · answered Aug 02 '18 at 06:36

You can use the following code as per your need..

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

Toggle Show And Hide Only Some Table Rows using Angularjs

2 Answers2