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

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

演示Plunkr