How to show one table a time when you have many in Angularjs?

Question

Following html code will show some tables (all at once) with 4 rows in each. I want to show them one by one on showNext button click. The id is generated automatically.

I need help with jQuery code.

<div ng-init="outerIndex=($index)" tableId="{{'table'+outerIndex}}" ng-repeat="oneList in mainList">
    <table class="animate-if">
         <thead>
                <tr>
                   <th>Names</th>
                   <th>Address</th>
                </tr>
         </thead>
         <tbody>
                <tr ng-repeat=" one in oneList | limitTo: 4 ">
                   <td>{{one.name}}</td>
                   <td>{{one.address}}</td>
                </tr>
         </tbody>
         </table>
       </div>
      <button class="btn " ng-click="showNext($tableId) "> Next </button>

And here is JavaScript code. I am getting table id here but how to perform action show one by one.

$scope.showNext = function (tableId) {
        $('[tableId ^= table]').each(function (i, e) {
            console.log($(e).attr('tableId'));   //this is printing table-id on console
            //$('tableId').hide();
        });
    }

Note: please see images for expected result scenario:

without-click

first-click

and so on.

Answer 1

After some workaround I found the answer what I was looking for. Thanks to @Ihor Korotenko. One modification in html file is "ng-show" attribute.

<div ng-init="outerIndex=($index)" tableId="{{'table'+outerIndex}}" ng-repeat="oneList in mainList" ng-show="oneList.flagValue">
<table class="animate-if">
     <thead>
            <tr>
               <th>Names</th>
               <th>Address</th>
            </tr>
     </thead>
     <tbody>
            <tr ng-repeat=" one in oneList | limitTo: 4 ">
               <td>{{one.name}}</td>
               <td>{{one.address}}</td>
            </tr>
     </tbody>
     </table>
   </div>
  <button class="btn " ng-click="more()"> More </button>
  <button class="btn " ng-click="less()"> Less </button>

Now here is the jQuery code:

$scope.getValueFromSvc= function ($index) {
        Service.myMethod().then(function (response) {
            var total = response.responseData;
            var mainList= [];   // contains all oneList
            var oneList = [];   //contain one table
            $.each(total, function (i, value){
                  // iterate data here to put in oneList then mainList
                }
            });
            // assigning flag which will be helpful on applying condition in next jQuery segment
            $.each(mainList, function (i, value) {
                if (i == 0)
                    value.flagValue = true;
                else
                    value.flagValue = false;
            });
            $scope.mainList = mainList;
        });
    }

And finally to show table on button click jQuery goes like...

$scope.more = function () {
        $.each($scope.mainList, function (i, value) {
            if (!value.flagValue) {
                value.flagValue = true;
                return false;
            }
        });
    };

    $scope.less = function () {
      for (var v = $scope.mainList.length - 1; v > 0; v--){
          if ($scope.mainList[v].flagValue) {
              $scope.mainList[v].flagValue = false;
              break;
          }
      }
    };

Answer 2

Consider the following code snippet to dynamically change tables:

var mainList = [{tableId:1}, {tableId:2}, {tableId:3}]


function mainController(){
  var vm = this;
  vm.mainList = mainList;
  vm.currentIndex = 0;
  vm.currentTable = currentTable();
  function showNext(){
    vm.currentIndex++;
    vm.currentTable = currentTable();
  }

  function currentTable(){
    return vm.mainList[currentIndex];
  }

}

<div tableId="{{'table'+currentTable.tableId}}" >
   <table class="animate-if">
     <thead>
            <tr>
             <th>Names</th>
             <th>Address</th>
            </tr>
     </thead>
     <tbody>
            <tr ng-repeat=" one in currentTable | limitTo: 4 ">
               <td>{{one.name}}</td>
                <td>{{one.address}}</td>
             </tr>
     </tbody>
     </table>
   </div>

Next

If you really need to have ng-repeat of all available tables and show/hide tables on next press than modify code in such way:

var mainList = [{tableId:1}, {tableId:2}, {tableId:3}]


function mainController(){
  var vm = this;
  vm.mainList = mainList;
  vm.currentIndex = 0;
  vm.currentTable = currentTable();
  function showNext(){
    vm.currentIndex++;
    vm.currentTable = currentTable();
  }

  function currentTable(){
    return vm.mainList[currentIndex];
  }
  function isActive(table){
    var tableIndex = mainList.indexOf(table);
    return tableIndex === currentIndex;
  }
}

<div tableId="{{'table'+currentTable.tableId}}"  ng-repeat="table in 
  mainList"
  ng-if="isActive(table)">
<table class="animate-if">
     <thead>
            <tr>
             <th>Names</th>
             <th>Address</th>
            </tr>
     </thead>
     <tbody>
            <tr ng-repeat=" one in currentTable | limitTo: 4 ">
               <td>{{one.name}}</td>
                <td>{{one.address}}</td>
             </tr>
     </tbody>
     </table>
   </div>
 <button class="btn " ng-click="showNext() "> Next </button>

Answer 3

Replace the below code with your appropriate data structures since it is unclear from question.

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.mainList=[[{name:"dummy1"},{name:"dummy2"}],[{name:"dummy3"},{name:"dummy4"}]];
    
$scope.count=1;
$scope.showNext = function () {
     $scope.count=$scope.count+1;
   
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="oneList in mainList | limitTo: count ">
        <table class="animate-if">
            <thead>
                <tr>
                    <th>Names</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="one in oneList | limitTo: 4 ">
                    <td>{{one.name}}</td>
                </tr>
            </tbody>
        </table>

    </div>
    <button class="btn" ng-click="showNext()"> Next </button>
</div>