Show/Hide dynamic content-based table rows using Angularjs

Question

Good morning I have several tables within a div, within these tables I show in the columns the days of the week, and in the rows several times. These times I limited to show only 8 at a time. When one clicks on the 'More' button, I show 8 more results. However, these 8 results also appear in the other tables. How do I make it appear only in the table I clicked on the button?

HTML is like this:

<table class="table table-bordered tabela" width="100%" style="margin-bottom: 0px; font-size:11px;">
                 <thead>
                    <tr>
                       <td><i class="fa fa-arrow-circle-left fa-2x"></i></td>
                       <td ng-repeat="dia in agenda.horarios">
                          <span tooltip-placement="top" tooltip="Retorno" tooltip-append-to-body="true" class="badge badge-warning days retorno">33</span>{{agendas.dia_semana[$index].dia_semana}}<span tooltip-placement="top" tooltip="Encaixe" tooltip-append-to-body="true" class="badge badge-warning days encaixe">33</span>
                          <br>                              
                         {{agendas.dia_semana[$index].data}}
                          <table class="table-striped" align="center" width="100%">                                    
                             <tr ng-repeat="hora in dia | limitTo:quantidade" style="color:#03a9f4; border: 1px solid #ddd">
                                <td>
                                   <div style="{{hora.color}}">{{hora.hora_agenda}}</div>                                                        
                                </td>
                             </tr>
                             <tr ng-show="dia.length > 0" style="color:#03a9f4">                                      
                                <td><a style="cursor: pointer;" ng-click="mostrarMais();">Mais...</a></td>                                       
                             </tr>                                    
                          </table>         
                       </td>
                       <td><i class="fa fa-arrow-circle-right fa-2x"></i></td>
                    </tr>
                 </thead>                        
              </table>

And the Controller so:

$scope.mostrarMais = function(){
$scope.quantidade += $scope.quantidade;
}

Answer 1

You are changing an object that is visible in the scope of all your tables - so they are all having their views changed.

In the following example, the parent-control (paiCtrl) has the collection to be viewed; the child controls (each a different instance of filhoCtrl) consume the collection by inheritance, while isolating the control of records to be viewed within their own scope.

angular.module('app', []).
controller('paiCtrl', function($scope) {
  $scope.col = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];
}).
controller('filhoCtrl', function($scope) {
  $scope.quantidade = 10;
});

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

<div ng-app="app" ng-controller="paiCtrl">

  <div ng-controller='filhoCtrl'>
    <button ng-click='quantidade = (quantidade == 3 ? 10: 3)'>Limitar filho 1</button><br/>
    <span ng-repeat="item in col | limitTo:quantidade">
        {{ item }}
      </span>
  </div>
  
  <div ng-controller='filhoCtrl'>
    <button ng-click='quantidade = (quantidade == 3 ? 10: 3)'>Limitar filho 2</button><br/>
    <span ng-repeat="item in col | limitTo:quantidade">
        {{ item }}
      </span>
  </div>
  
</div>