Question

有一段时间我试图找到如何使用Angular来加载更多（来自数组的元素）按钮。

我在数组中有9个元素，我使用ng-repeat来循环它们，并limitTo:3输出前3个。

问题：

1：可以仅使用角度来加载更多按钮吗？（例如，加载更多按钮位于底部）

2：如果没有，如何使用jQuery来完成这项工作？

http://plnkr.co/edit/1gHB9zr0lbEBwlCYJ3jQ

谢谢！

Answer 1

您不需要考虑jQuery，因为您可以通过使用AngularJS本身轻松解决此问题。

您可以在控制器中维护一个变量，将其命名为limit，然后在limit函数内增加loadMore()变量。

<强>标记

<div ng-repeat="elem in travel.cruise | limitTo:travel.limit" class="cruises">

  ....COntent here...

</div>

<强>控制器

app.controller('TravelController', function($scope) {
    var vm = this;
    vm.cruise = cruises;
    vm.limit = 3;

    $scope.loadMore = function() {
      var increamented = vm.limit + 3;
      vm.limit = incremented > vm.cruise.length ? vm.cruise.length : increamented;
    };
});

Demo Plunkr

Answer 2

您可以将@Pankaj Parkar回复与infiniteScroll结合使用，这样您甚至不需要按钮。

Answer 3

无需破解任何深度编码。只需添加一行代码

即可

<div ng-repeat="elem in travel.cruise | limitTo:travel.limit" class="cruises">

..NG Repeat..

</div>

<强>控制器

$scope.loadMore = function() {
      vm.limit = vm.limit + 3;
};

分配变量以增加3个或更多数字将使您的代码轻松工作。

简单易行的技巧

如何使用AngularJS加载更多元素？

3 个答案: