Question

我有一个对象数组：

[
{ID: "1234", FName: "Steve", LName: "Adams", Status: "New",CreatedBy: "sadams"},
{ID: "5648", FName: "Jon", LName: "Lewis", Status: "New",CreatedBy: "jlewis"},
{ID: "9872", FName: "Hor", LName: "Mt", Status: "Open",CreatedBy: "hmt"},
{ID: "1212", FName: "Allison", LName: "Pan", Status: "New",CreatedBy: "apan"},
...
...so on
]

此数据是从我的API返回的，可以成百上千。

现在，我正在使用没有任何第三方来源的简单HTML表在屏幕上显示此数据，并且在angularjs中使用ng-repeat将此数据绑定到表。由于数据太多，我不想一次在屏幕上加载整个数据。我只想加载前50行，然后链接为“显示下50条”。单击该按钮，接下来的50行将被压入数组，依此类推。

这是我目前拥有的

$http.get('https://myApi').success(function(data) {
    var arr = [];

    //This holds all the data returned
    $scope.dataFromApi = data;

    for (var j = 0; j < 50; j++) {
        //This holds the first 50 rows
        arr.push(data[j]);
    }   

    //This is binding back to the UI
    $scope.tableData = arr;

 }

  $scope.buttonClick = function () {
      //How can I get the next 50 rows from $scope.dataFromApi and add it to $scope.tableData   
  }

每次单击按钮并添加到现有阵列时，如何获得下50行。

请注意，我目前不在寻找任何其他第三方来源或任何分页方法。

---更新---

对于任何其他正在寻找的人。我将其解析为：

创建自定义过滤器（就像我在使用angularjs 1.3.4一样）：

app.filter('myLimitTo', function() {
  return function(input, limit, begin) {
    return input.slice(begin, begin + limit);
  };
});

在我的html中：

  <tr ng-repeat="r in datarows | myLimitTo:limit:start">

控制器：

 $scope.start = 0;
 $scope.limit = 10;

 $scope.next = function () {
        incrementLimit(true)
    }
    $scope.prev = function () {
        incrementLimit(false)
    }

    function incrementLimit(up) {
        if (up) {
            ($scope.start <= ($scope.data.rows.length - $scope.limit)) ? $scope.start += 10 : $scope.start = 0;
        } else {
            $scope.start > 10 ? $scope.start -= 10 : $scope.start = 0;

        }
    }

Answer 1

使用limitTo过滤器：

https://docs.angularjs.org/api/ng/filter/limitTo

HTML：

{{ limitTo_expression | limitTo : limit : begin}}

JS：

$filter('limitTo')(input, limit, begin)

在您的情况下，限制为静态50，您可以通过buttonClick函数更改开始。

还请记住在转发器中添加track by，其中包含从api返回的数据的ID /唯一值。

Answer 2

这是一个典型的用例，称为pagination。想法是将当前页面和当前页面大小（在您的情况下为50）存储在变量中，并在用户选择下一个/上一个时引用此值。所以你要做的是像

app.controller('someController', ['$scope', '$http', function($scope, $http){
  $scope.currentPage = 1;
  $scope.numberOfRecordsPerPage = 50;

  $http.get('https://myApi').success(function(data) {
    // ...
    $scope.dataFromApi = data;
    $scope.tableData = data.slice(0, $scope.numberOfRecordsPerPage);
  }

  $scope.buttonClick = function () {
    $scope.currentPage++;

    const startIndex = ($scope.currentPage * $scope.numberOfRecordsPerPage) + 1;
    // if current page is 1, then startIndex will be (1*50)+1 = 51
    // if current page is 2, then startIndex will be (2*50)+1 = 101
    // and so on.

    //Now slice the array from startIndex

    $scope.tableData = data.slice(startIndex, $scope.numberOfRecordsPerPage);
  }

  //similarly you can do so if you want to go back to previous page

  $scope.buttonClickPrev = function () {
    $scope.currentPage--; // in this case you will subtract value by 1

    const startIndex = ($scope.currentPage * $scope.numberOfRecordsPerPage) + 1;    
    $scope.tableData = data.slice(startIndex, $scope.numberOfRecordsPerPage);
  }

}]);

Answer 3

为什么不在后端分页，那么您只是使用页面来获取数据？如果您要坚持这种方式，则可以将for循环提取为以page为参数的函数，例如：

const pushDataToTableData = (page, perpage = 50) => {
  arr.push(data.slice(page * perpage, (page + 1) * perpage));
}

成功回调一次，然后单击page++并调用此函数

从对象数组中获取下一个'n'行

3 个答案: