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

Question

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

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

问题:

1:是否可以仅使用 Angular 来制作“加载更多”按钮？(“加载更多”按钮在示例中位于底部)

2:如果没有，如何使用 jQuery 使其工作？

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

谢谢!

Answer 1

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

您可以在 Controller 内维护一个变量，将其命名为 limit，然后在 loadMore() 函数内递增 limit 变量。

标记

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

  ....COntent here...

</div>

Controller

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