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

在控制器上我写道：

 $scope.limit = 10;

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

单击超链接

调用函数incrementLimit

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

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

我在beginnig上的方法被加载并正确显示前10个元素，当我点击“more”时，变量$scope.limit会递增，但在页面上没有任何反应。任何人都可以解释我为什么？

Answer 1

limitTo在ng-repeat-start

中正常运行

看看这个

＆＃13;

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'
    }]
});

＆＃13;

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

＆＃13;

Answer 2

请检查以下代码，并将其设置为正常

     <body ng-controller="myController">
  <button ng-click="incrementLimit()" >increment</button> <br/>
            <table class="table table-hover table-hidden">
                <thead>
                    <tr clospan="3">
                        Head
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat-start="friend in objects|limitTo: limit"  ng-init="isCollapsed=true">
                        <td>{{friend.name}}</td>
                        <td>{{friend.phone}}</td>
                        <td>{{friend.age}}</td>
                    </tr>

                    <tr ng-repeat-end class="more">
                        <td colspan="3">Footer</td>
                    </tr>
                </tbody>
            </table>

        </table>
    </body>

js code

app = angular.module("app", []);
app.controller("myController", function($scope) {
$scope.objects =
    [{
        name: 'John',
        phone: '555-1212',
        age: 10
    }, {
        name: 'Mary',
        phone: '555-9876',
        age: 19
    }, {
        name: 'Mike',
        phone: '555-4321',
        age: 21
    }, {
        name: 'Adam',
        phone: '555-5678',
        age: 35
    }, {
        name: 'Julie',
        phone: '555-8765',
        age: 29
    }];
   $scope.limit = 2;

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

小提琴http://jsbin.com/hoguxexuli/1/edit

Answer 3

我解决了我的问题。基本上我把超链接放在一个不同的div中，所以控制器和$scope也不同。这是一种愚蠢的粗心大意。

AngularJS ng-repeat-start with limitTo不起作用

3 个答案: