Добавьте больше строк в таблицу после увеличения углового предела

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