javascript - angularjs html中动态表的分页

Question

我是 AngularJS 的新手。 我想添加分页以动态创建表行。添加 3 行后显示分页。 当您单击“购买”时，它会添加行但不会在 3 行后分页。我在 Controller ( script.js )中提到限制为 3 请在此处查看 plunker 演示 http://plnkr.co/edit/aViHHoqLBSSiIVMh2KkH?p=preview

`<tr ng-repeat="sum in priceSumRow | filter : paginate">`
buySellApp.controller('buySellCtrl', ['$scope', function($scope) {
 $scope.totalItems = $scope.priceSumRow.length;
 $scope.currentPage = 1;
  $scope.numPerPage = 5;

  $scope.paginate = function(value) {
  var begin, end, index;
   begin = ($scope.currentPage - 1) * $scope.numPerPage;
     end = begin + $scope.numPerPage;
    index = $scope.priceSumRow.indexOf(value);
   return (begin <= index && index < end);
 };
 }]);

Answer 1

您需要在代码中更正一些内容。

• 您正在定义相同的 Controller buySellCtrl两次。一次在 script.js 中，一次在 html 本身中，这是完全不必要的。相反，您可以移动 paginate script.js 内的代码.
• total-items对于分页应该是数组的长度 priceSumRow喜欢 <pagination total-items="priceSumRow.length" ...而不是<pagination total-items="totalItems.length" ...这可以防止 Controller 产生额外的作用域变量。
• max-size="3" for pagination 定义当前页面显示的记录的最大限制 & items-per-page="numPerPage"定义页面中记录的明确数量但在您的情况下您已经定义了 numPerPage如5

<小时/>

注意:我建议您在严格模式下工作 use strict; ，严格模式是一种选择 JavaScript 受限制变体的方法。

MDN : Strict mode makes several changes to normal JavaScript semantics. First, strict mode eliminates some JavaScript silent errors by changing them to throw errors. Second, strict mode fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode. Third, strict mode prohibits some syntax likely to be defined in future versions of ECMAScript.

Working Demo @ Plunker