如何使用 AngularJS 加载更多元素? [英] How to load more elements with AngularJS?

问题描述

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

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

问题:

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

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

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

谢谢！

解决方案

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

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

标记

....内容在这里...

控制器

app.controller('TravelController', function($scope) {var vm = 这个；vm.cruise = 巡航；vm.limit = 3;$scope.loadMore = function() {var 增加 = vm.limit + 3;vm.limit = 增加 >vm.cruise.length ?vm.cruise.length:增加；};});

演示 Plunkr

for a while I am trying to find how to make a load more(elements from an array) button,using Angular.

I have 9 elements in array, I use ng-repeat to loop them, and limitTo:3 to output first 3.

Questions:

1: is possible to make a load more button using only angular?(load more button is at bottom in example)

2: if not, how to make this work using jQuery?

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

Thanks!

解决方案

You don't need to think of jQuery, as you could solve this problem easily by using AngularJS itself.

You could maintain a variable inside your controller, name it as limit, then increment the limit variable inside loadMore() function.

Markup

<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

这篇关于如何使用 AngularJS 加载更多元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！