在angularjs HTML分页动态表 [英] pagination for dynamic table in angularjs html

问题描述

我是新来angularjs。
我想添加分页动态创建表行。经过3行显示添加分页。
 当你点击购买，它增加了行，但后三排不分页。我在控制器中提到的限制为3（的script.js）
请点击这里查看plunker演示
http://plnkr.co/edit/aViHHoqLBSSiIVMh2KkH?p=$p$pview

 `＆LT; TR NG重复=总和priceSumRow |过滤器：分页＆GT;`
buySellApp.controller（'buySellCtrl'，['$范围'，函数（$范围）{
 $ scope.totalItems = $ scope.priceSumRow.length;
 $ scope.currentPage = 1;
  $ scope.numPerPage = 5;  $ scope.paginate =功能（值）{
  VAR开始，结束，指数;
   开始=（$ scope.currentPage  -  1）* $ scope.numPerPage;
     最终=开始+ $ scope.numPerPage;
    指数= $ scope.priceSumRow.indexOf（值）;
   回报（开始＆LT; =＆指数放大器;＆安培;指数＆LT; END）;
 };
 }]）;
 

解决方案

有几个您需要在code纠正的事情。

• 您所定义的同一个控制器 buySellCtrl 的两倍。一旦在你的script.js和HTML本身，这完全是unnecessary.instead一次就可以了，移动分页 code中的脚本中.js文件。


• 总项为分页应该数组的长度 priceSumRow 如＆LT;分页的总项=priceSumRow.length... 而不是＆LT;分页总项=totalItems.length... 其中$ p $从控制器pvents一个额外的范围的变量。


• 最大规模=3为分页定义要显示在当前页和放大器记录的最大限制; 项目每页=numPerPage定义页面的记录一定数目的但在你的情况下，你已经定义 numPerPage 5

---

的注：我建议你在一个严格模式使用严格的工作; ，严格的模式是可以选择适用的JavaScript的限制变种的一种方式。 的

  

MDN：严格模式，使一些更改普通的JavaScript语义。首先，严格模式消除了通过改变他们抛出错误一些JavaScript无声的错误。二，严格模式修复的错误，很难让JavaScript引擎进行优化：严格模式code有时会做出跑的比相同code，这不是严格模式快。三，严格禁止模式语法的一些可能在ECMAScript中的未来版本中定义。

工作演示@ Plunker

I am new to angularjs. I want to add pagination to dynamically creating rows of table. after 3 rows added display pagination. when you click buy, it adds row but not paginating after 3 rows. I mentioned limit as 3 in controller ( script.js) please check plunker demo here 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);
 };
 }]);

解决方案

There are couple of things you need to correct in your code.

• You are defining the same controller buySellCtrl twice. once in your script.js and once in html itself, which is totally unnecessary.instead you can ,move the paginate code inside the script.js.
• total-items for pagination should the length of the array priceSumRow like <pagination total-items="priceSumRow.length" ... instead of <pagination total-items="totalItems.length" ... which prevents a extra scope variable from the controller.
• max-size="3" for pagination defines the max limit for the records to be displayed in a current page & items-per-page="numPerPage" defines definite number for records in a page but in your case you had defined numPerPage as 5

---

Note:I would suggest you to work in a strict mode use strict;, strict mode is a way to opt in to a restricted variant of 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

这篇关于在angularjs HTML分页动态表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！