AngularJS 1.6分页不显示

Question

我是 Angular 的新手，我正在构建之前由 Jason Watmore (http://jasonwatmore.com/post/2016/01/31/angularjs-pagination-example-with-logic-like-google) 创建的关于分页的教程。

我已经非常接近让它工作了，但我显然遗漏了一些关键步骤。

我的示例应用程序将退出，获取数据，然后 return 它，但它没有显示在页面上的 div 中，并且分页不起作用（如预期的那样） .

Index.html

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

<body>
  <div class="contentWrapper">
     <div data-ng-controller="searchBtnCtrl as vm">
  <h3>Search:</h3>
  <input id="searchQuery" type="text" placeholder="enter your search query here" data-ng-model="searchInput" />

  <button id="searchBtn" data-ng-click="performSearch()">SEARCH</button>

  <div id="searchResults">
    <!-- items being paged -->
    <div ng-repeat="post in vm.posts"><a href='{{post.title}}' alt='{{post.title}}'>{{post.title}}</a><br />{{post.body}}</div>

    <!-- pager -->
    <ul ng-if="vm.pager.pages.length" class="pagination">
      <li ng-class="{disabled:vm.pager.currentPage === 1}">
        <a ng-click="vm.setPage(1)">First</a>
      </li>
      <li ng-class="{disabled:vm.pager.currentPage === 1}">
        <a ng-click="vm.setPage(vm.pager.currentPage - 1)">Previous</a>
      </li>
      <li ng-repeat="page in vm.pager.pages" ng-class="{active:vm.pager.currentPage === page}">
        <a ng-click="vm.setPage(page)">{{page}}</a>
      </li>
      <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
        <a ng-click="vm.setPage(vm.pager.currentPage + 1)">Next</a>
      </li>
      <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
        <a ng-click="vm.setPage(vm.pager.totalPages)">Last</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</body>
</html>

app.js

(function () {
    'use strict';

    var app = angular
        .module('testApp', [])
        .factory('PagerService', PagerService);

    //controllers
        app.controller('searchBtnCtrl', ['$scope', '$http', 'PagerService', function ($scope, $http, PagerService) {
        $scope.performSearch = function() {
            console.log('clicked');
            $('#searchResults').html('');

            var vm = this;

            $http.get('https://jsonplaceholder.typicode.com/posts').then(function (response) {
                $scope.responseData = response.data;
                console.log($scope.responseData.length);
                console.log($scope.responseData);

                vm.itemsToDisplay = $scope.responseData; // array of items to be paged
                vm.pager = {};
                vm.setPage = setPage;

                initController();

                function initController() {
                    // initialize to page 1
                    vm.setPage(1);
                }

                function setPage(page) {
                    if (page < 1 || page > vm.pager.totalPages) {
                        return;
                    }

                    // get pager object from service
                    vm.pager = PagerService.GetPager(vm.itemsToDisplay.length, page);

                    // get current page of items
                    vm.items = vm.itemsToDisplay.slice(vm.pager.startIndex, vm.pager.endIndex + 1);
                }

            });
        }
    }]);

    function PagerService() {
        // service definition
        var service = {};

        service.GetPager = GetPager;

        return service;

        // service implementation
        function GetPager(totalItems, currentPage, pageSize) {
            // default to first page
            currentPage = currentPage || 1;

            // default page size is 10
            pageSize = pageSize || 10;

            // calculate total pages
            var totalPages = Math.ceil(totalItems / pageSize);

            var startPage, endPage;
            if (totalPages <= 10) {
                // less than 10 total pages so show all
                startPage = 1;
                endPage = totalPages;
            } else {
                // more than 10 total pages so calculate start and end pages
                if (currentPage <= 6) {
                    startPage = 1;
                    endPage = 10;
                } else if (currentPage + 4 >= totalPages) {
                    startPage = totalPages - 9;
                    endPage = totalPages;
                } else {
                    startPage = currentPage - 5;
                    endPage = currentPage + 4;
                }
            }

            // calculate start and end item indexes
            var startIndex = (currentPage - 1) * pageSize;
            var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

            // create an array of pages to ng-repeat in the pager control
            var pages = _.range(startPage, endPage + 1);

            // return object with all pager properties required by the view
            return {
                totalItems: totalItems,
                currentPage: currentPage,
                pageSize: pageSize,
                totalPages: totalPages,
                startPage: startPage,
                endPage: endPage,
                startIndex: startIndex,
                endIndex: endIndex,
                pages: pages
            };
        }
    }



})();

这是项目的代码笔。 对于此示例，忽略搜索框，只需按搜索按钮即可激活脚本。

https://codepen.io/code_nick/pen/gvQJLX?editors=1010

还有调试版。如果您在控制台打开的情况下查看此版本，您会看到它正在计算项目的数量 returned（好）和 returning 数据作为对象（也好），它只是没有显示在页面上（糟糕的#1）和分页不起作用（糟糕的#2）。

https://s.codepen.io/code_nick/debug/gvQJLX/PBMNWxowdewr

我认为这可能是范围问题，但由于 angular 中的范围仍然给我带来问题，也许当 html 中的 ng-repeat 触发时数据不可用？

Answer 1

有3处不对。

您需要在 this 外部存储控制器的引用 performSearch 函数。
您不应该将 searchResults 中的 html 替换为空
您在 ng-repeat 中使用 vm.posts，但 vm.items 持有职位

完成所有修复后，最终代码应如下所示

JS

(function() {
  "use strict";

  var app = angular.module("testApp", []).factory("PagerService", PagerService);

  //controllers
  app.controller("searchBtnCtrl", [
    "$scope",
    "$http",
    "PagerService",
    function($scope, $http, PagerService) {
      var vm = this;
      $scope.performSearch = function() {
        console.log("clicked");
        $(".post").remove();

        $http
          .get("https://jsonplaceholder.typicode.com/posts")
          .then(function(response) {
            $scope.responseData = response.data;
            console.log($scope.responseData.length);
            console.log($scope.responseData);

            vm.itemsToDisplay = $scope.responseData; // array of items to be paged
            vm.pager = {};
            vm.setPage = setPage;

            initController();

            function initController() {
              // initialize to page 1
              vm.setPage(1);
            }

            function setPage(page) {
              if (page < 1 || page > vm.pager.totalPages) {
                return;
              }

              // get pager object from service
              vm.pager = PagerService.GetPager(vm.itemsToDisplay.length, page);

              // get current page of items
              vm.posts = vm.itemsToDisplay.slice(
                vm.pager.startIndex,
                vm.pager.endIndex + 1
              );
            }
          });
      };
    }
  ]);

  function PagerService() {
    // service definition
    var service = {};

    service.GetPager = GetPager;

    return service;

    // service implementation
    function GetPager(totalItems, currentPage, pageSize) {
      // default to first page
      currentPage = currentPage || 1;

      // default page size is 10
      pageSize = pageSize || 10;

      // calculate total pages
      var totalPages = Math.ceil(totalItems / pageSize);

      var startPage, endPage;
      if (totalPages <= 10) {
        // less than 10 total pages so show all
        startPage = 1;
        endPage = totalPages;
      } else {
        // more than 10 total pages so calculate start and end pages
        if (currentPage <= 6) {
          startPage = 1;
          endPage = 10;
        } else if (currentPage + 4 >= totalPages) {
          startPage = totalPages - 9;
          endPage = totalPages;
        } else {
          startPage = currentPage - 5;
          endPage = currentPage + 4;
        }
      }

      // calculate start and end item indexes
      var startIndex = (currentPage - 1) * pageSize;
      var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

      // create an array of pages to ng-repeat in the pager control
      var pages = _.range(startPage, endPage + 1);

      // return object with all pager properties required by the view
      return {
        totalItems: totalItems,
        currentPage: currentPage,
        pageSize: pageSize,
        totalPages: totalPages,
        startPage: startPage,
        endPage: endPage,
        startIndex: startIndex,
        endIndex: endIndex,
        pages: pages
      };
    }
  }
})();

HTML

<html ng-app="testApp">

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

<body>
  <div class="contentWrapper">
    <div data-ng-controller="searchBtnCtrl as vm">
      <h3>Search:</h3>
      <input id="searchQuery" type="text" placeholder="enter your search query here" data-ng-model="searchInput" />

      <button id="searchBtn" data-ng-click="performSearch()">SEARCH</button>

      <div id="searchResults">
        <!-- items being paged --> 
        <div ng-repeat="post in vm.posts"> 
          <span class="post"><a href='{{post.title}}' alt='{{post.title}}'>{{post.title}}</a><br />{{post.body}}</span></div>

        <!-- pager -->
        <ul ng-if="vm.pager.pages.length" class="pagination">
          <li ng-class="{disabled:vm.pager.currentPage === 1}">
            <a ng-click="vm.setPage(1)">First</a>
          </li>
          <li ng-class="{disabled:vm.pager.currentPage === 1}">
            <a ng-click="vm.setPage(vm.pager.currentPage - 1)">Previous</a>
          </li>
          <li ng-repeat="page in vm.pager.pages" ng-class="{active:vm.pager.currentPage === page}">
            <a ng-click="vm.setPage(page)">{{page}}</a>
          </li>
          <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
            <a ng-click="vm.setPage(vm.pager.currentPage + 1)">Next</a>
          </li>
          <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
            <a ng-click="vm.setPage(vm.pager.totalPages)">Last</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</body>

</html>

AngularJS 1.6分页不显示

AngularJS 1.6 pagination not displaying

jquery

angularjs

binding

angularjs-scope