angularjs - 在 angular 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

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

Answer 2

尝试这个。您忘记在函数和 queueRowLimit 变量之前添加 $scope。变量也不在单引号中。

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