Show / Hide table rows based on dynamic content using AngularJS

Navigation
1

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

HTML looks 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 like this: 

$scope.mostrarMais = function(){
$scope.quantidade += $scope.quantidade;
}
    
asked by anonymous 28.03.2015 / 14:42

1 answer

1

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

In the following example, the parent control ( paiCtrl ) has the collection to be viewed; child controls (each an instance other than filhoCtrl ) consume the collection by inheritance, while isolating the control of records to be viewed within its 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><divng-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>
    
28.03.2015 / 16:37
Height 100% in the content how can i get permission publish_actions from facebook?