javascript - AngularJS ng-repeat-start 与 limitTo 不起作用

Question

我有一个包含多个对象的列表，一开始我只想加载其中的一些。我查看了ng-repeat语句，但我需要有这样的结构:

<table class="table table-hover table-hidden">
       <thead>
           <tr>
           ...
           </tr>
       </thead>

       <tbody>
          <tr ng-repeat-start="object in objects | filter:query | orderBy:predicate:reverse"  ng-init="isCollapsed=true">   
          ...
         </tr>
         <tr ng-repeat-end class="more">
          ...
         </tr>
      </tbody>
   </table>

我尝试在 ng-repeat-start 中应用语句 limitTo，如下所示:

<tr ng-repeat-start="object in objects | filter:query | orderBy:predicate:reverse| limitTo: limit"  ng-init="isCollapsed=true"> 

在 Controller 上我写道:

 $scope.limit = 10;

    $scope.incrementLimit = function () {
        $scope.limit += 10;
    };

通过点击超链接来调用函数incrementLimit

 <a href ng-click="incrementLimit()">more</a>

页面加载时，对象列表被实例化并填充(包含所有元素)。

按照我一开始的方法，加载并正确显示前 10 个元素，当我单击“更多”时，变量 $scope.limit 会增加，但页面上没有任何反应。谁能解释一下为什么？

Answer 1

limitTo 在 ng-repeat-start

内工作正常

看看这个

var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
    $scope.limit = 1;

    $scope.incrementLimit = function () {
        $scope.limit += 1;
    };
    
    $scope.data = [{
        title: 'Foo',
        text: 'Lorem'
    }, {
        title: 'Bar',
        text: 'Iste'
    }, {
        title: 'Jon',
        text: 'Fat'
    }, {
        title: 'Los',
        text: 'Ice'
    }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div ng-app='myApp' ng-controller="Controller">
    <table border="2" class="table table-hover table-hidden">
        <thead>
            <tr>...</tr>
        </thead>
        <tbody>
            <tr ng-repeat-start="object in data | filter:query | orderBy:predicate:reverse| limitTo: limit" ng-init="isCollapsed=true" ng-bind="object.title">...</tr>
            <tr ng-repeat-end class="more">...</tr>
        </tbody>
    </table>
    <a href="#" ng-click="incrementLimit()">more</a>
</div>