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.

score 2 · Answer 1 · answered Mar 28 '16 at 14:32

<div ng-app="module" ng-controller="ListController">
    <ul>
       <li ng-repeat="item in items | limitTo: itemsLimit()">
          {{ item }}        
       </li>               
    </ul>
    <button ng-show="hasMoreItemsToShow()" ng-click="showMoreItems()">Show more</button>    
</div>

Controller:

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

module.factory('itemService', function() {
    return {
        getAll : function() {
            var items = [];
            for (var i = 1; i < 25; i++) {
                items.push('Item ' + i);                       
            }
            return items;
        }
    };              
});

ListController = function($scope, itemService) {
    var pagesShown = 1;
    var pageSize = 5;
    $scope.items = itemService.getAll();
    $scope.itemsLimit = function() {
        return pageSize * pagesShown;
    };
    $scope.hasMoreItemsToShow = function() {
        return pagesShown < ($scope.items.length / pageSize);
    };
    $scope.showMoreItems = function() {
        pagesShown = pagesShown + 1;         
    };
};

Hadi J · Accepted Answer · 2016-03-28T14:42:26.057

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>

Add more rows to table after angular limitTo increased

2 Answers2