Добавить строки в таблицу после угловой limitTo увеличилась

Question

Я пытаюсь добавить несколько строк в таблицу, изменив limitTo значение:

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

Функции, чтобы соответствовать этому:

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

И моему таблица body:

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

limitTo работает нормально, но это не так добавив в таблицу больше строк.

Answer 1

попробуйте это. вы забыли добавить $ scope перед функцией и переменную queueRowLimit. также переменная не находится в одинарной кавычке.

$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>

Answer 2

<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> 

Контроллер:

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;   
    }; 
};