Question

我有一个包含50多条记录的$scope对象。我有<div>通过limitTo显示此$scope中的前5条记录。

我有一个按钮＆＃39;查看更多＆＃39;每次点击时显示接下来的5条记录。

但是，一旦显示了50条记录，我希望我的按钮可以调用一个函数getMore()，该函数在它自己的位置上可以获得另外50条记录。

HTML：

<div ng-repeat="data in myData | limitTo: Limit" >
    {{ data.name }}
</div>


<button ng-click="Limit = Limit + 5">
    See More
</button>

<button ng-click="getMore()">
    See More
</button>

JS：

app.controller("MyCtrl", function($scope) {

    $scope.Limit = 5;

    $scope.getMore = function () {
        // Call service to get more data
    };

});

如何删除需要2个按钮？但是，在getMore()一次调用时，最多返回50个结果（或者例如34个），一次显示5个结果？

由于

Answer 1

您正在尝试实施无限滚动。

这是我的简单解决方案，它暗示了对后端的分页支持：

CoffeeScript的：

angular.module('yourApp.controllers').controller 'InfiniteCtrl',
 ['$resource', '$scope', 'DataResource',
  ($resource, $scope, DataResource) ->
    new class InfiniteCtrl
      constructor: () ->
        $scope.myData = []
        @counter = 0
        @loadMore()

      loadMore: () ->
        @counter += 1
        @DataResource.get({page:@counter}).$promise.then (data) ->
          $scope.myData = $scope.jobs.concat(data)
  ]

编译JS：

angular.module('yourApp.controllers').controller('InfiniteCtrl', [
  '$resource', '$scope', 'DataResource', function($resource, $scope, DataResource) {
    var InfiniteCtrl;
    return new (InfiniteCtrl = (function() {
      function InfiniteCtrl() {
        $scope.myData = [];
        this.counter = 0;
        this.loadMore();
      }

      InfiniteCtrl.prototype.loadMore = function() {
        this.counter += 1;
        return this.DataResource.get({
          page: this.counter
        }).$promise.then(function(data) {
          return $scope.myData = $scope.jobs.concat(data);
        });
      };

      return InfiniteCtrl;

    })());
  }
]);

您可以调整此解决方案以限制您显示的项目数量。

在您的模板中，可以使用以下方式显示更多数据：

<button ng-click="ctrl.loadMore()">More!</button>

AngularJS根据计数器执行2种类型的ng-click

1 个答案: