Add more rows to table after angular limitTo increased

Question

I am trying to add more rows to a table by changing the limitTo value:

<button ng-click="showMoreQueues()">Show More </button>

The function to match it :

$showMoreQueues = function(){
    $queueRowLimit += 20;
}

And my table body:

<tbody ng-repeat="rule in ruleList | limitTo :'queueRowLimit' ">
     //table data....
</tbody>

The limitTo works fine but it is not adding more rows to the table.

Answer 1

try this. you forgot add $scope before function and queueRowLimit variable. also the variable not be in single quotation .

  $scope.showMoreQueues = function(){
      $scope.queueRowLimit += 20;
 }

  <tbody ng-repeat="rule in ruleList | limitTo :queueRowLimit ">
       //table data....
  </tbody>

var app = angular.module("app",[])
app.controller('ctrl',['$scope', function($scope){
  $scope.queueRowLimit = 2;
  $scope.data=[];
$scope.data=[{"name":"ali0"},
             {"name":"ali1"},
             {"name":"ali2"},
             {"name":"ali3"},
             {"name":"ali4"},
             {"name":"ali5"},
             {"name":"ali6"}
          ];
 $scope.addFields = function (field) {
   $scope.data.push(field);
  };
  $scope.showMoreQueues = function(){
     $scope.queueRowLimit += 2;
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="item item-checkbox">
  <button ng-click="showMoreQueues()">Show More </button>
   <div ng-repeat="d in data | limitTo :queueRowLimit ">
    <label>{{d.name}}</label>
</div>    
</div>