我有一个包含多个对象的列表,一开始我只想加载其中的一些。我查看了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
会增加,但页面上没有任何反应。谁能解释一下为什么?
最佳答案
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>
关于javascript - AngularJS ng-repeat-start 与 limitTo 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30027804/