Question

我正在尝试在Angular JS中实现服务器端分页。我创建了由results和名为isMoreResults的变量组成的服务器响应。当isMoreResults为真时，我可以放心地假设它有更多的结果要显示。现在我该如何在角度Js侧创建分页，以便我可以显示PREVIOUS和NEXT。当用户点击下一个时，我可以调用服务器来获取下一个响应。任何一个引导我如何实现以及实现分页的正确格式是什么？我已经浏览了很多站点并且主要是我可以看到客户端验证。我还应该切换到客户端验证吗？

Answer 1

你可以这样做。

 angular.module('app', ['ui.bootstrap']);
    angular.module('app').controller('PaginationDemoCtrl', function($scope, $http) {

      $scope.currentPage = 1;
     $scope.limit= 10;


      $scope.tracks = [];
      getData();


      function getData() {
        $http.get("https://api.spotify.com/v1/search?query=iron+&offset="+($scope.currentPage-1)*$scope.limit+"&limit=20&type=artist")
          .then(function(response) {
            $scope.totalItems = response.data.artists.total
            angular.copy(response.data.artists.items, $scope.tracks)


          });
      }

    //get another portions of data on page changed
      $scope.pageChanged = function() {
        getData();
      };


    });

in html

   <div ng-controller="PaginationDemoCtrl">
    <h4>Sample Server Pagination</h4>

    <uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="100"></uib-pagination>          
  </div>

Answer 2

通常这样做是为了分页：

1 - 创建一个API，其中包含多少SKIP和多少TAKE ..有点像：

http://www.test.com/api/Users?skip=0&take=10

然后：

2 - 在Angular中安装此插件:(可能用bower或npm）

https://github.com/brantwills/Angular-Paging

3 - 在您的HTML中，例如：

 <paging page="currentPage" 
                page-size="pageSize" 
                total="total"
                paging-action="DoPaging(page, pageSize, total)">

        </paging>

4 - 在你的控制器中：

/**
 * MainCtrl - controller
 */
"use strict";
angular
    .module('demo')
    .controller('UsersCtrl', [
        "$scope",
        "User",

        "$state",
        "$timeout",
        function (
            $scope,
            User,            
            $state,
            $timeout) {

            var vm = this;

            // Binded Functions


            $scope.currentPage = 1;
            $scope.pageSize = 10;

            $scope.DoPaging = _doPaging;

//页面加载的init（）;

            /////////////////////////////////
            // PRIVATE FUNCTION
            ////////////////////////////////

            //Page Load
            function init() {

                $scope.promUsers = User.GetUsers(0, 10).$promise.then(function (resp) {
                    vm.users = resp;

$ scope.total = resp [0] .total //＆lt; - 在您的后端实体中放入一个字段，您可以在其中存储您的数据库中有多少记录（全部） }）。catch（function（err）{ 的console.log（ERR）; }）; }

            function _doPaging(text, page, pageSize, total) {
                var skip = pageSize * (page -1);

                User.GetUsers(skip, pageSize).$promise.then(function(resp){
                    vm.users = resp;
                    $scope.total = resp[0].total 
                }).catch(function (err) {
                    console.log(err);
                });
            }



            ////////////////////////////////


        }]);

5 - 在您的服务中：

"use strict";

angular
    .module("demo")
    .factory("User", [
        "$resource",
        "$q",

        "enviroment",
        "$timeout",
        function (
            $resource,
            $q,

            enviroment,
            $timeout) {


            // Private Filed
            var _serviceBase = "api/User/";


            // Private Method

            //skip and take in query string
            var resource = $resource(enviroment.apiUrl + _serviceBase, { skip: '@skip', take: '@take' }, {
                query: { method: "GET", isArray: true },
                create: { method: "POST", isArray: false },
                update: { method: "PUT", isArray: false }
            });



            // Public Method
            return {
                GetUsers: function (skip, take) {
                    return resource.query({ skip: skip, take: take });
                }

            };
        }]);

Angular JS

2 个答案: