Question

大家好我想为桌子分页。分页创建10组行数据一页另一组10行第二页使用角度js。我试过很多方法但是如果有人知道解决方案就无法得到解决方案请帮帮我... 演示链接为https://plnkr.co/edit/hT9fBUMWOBoOHHjba1Uo?p=preview

HTML

<td data-title="'S.No'" sortable="'s_no'" filter="{ 's_no': 'text' }">{{$index + 1}}</td>
             <td data-title="'Enquiry Received Date'" sortable="'enquiry_received_date'" filter="{ 'enquiry_received_date': 'text' }">{{sryarnenquiry.enquiry_received_date | date:'dd-MM-yyyy'}}</td>
              <td data-title="'Count'" sortable="'description_count'" filter="{ 'description_count': 'text' }">{{sryarnenquiry.description_count}}</td>
              <td data-title="'Quality'" sortable="'description_quality'" filter="{ 'description_quality': 'text' }">{{sryarnenquiry.description_quality}}</td>
               <td data-title="'Quantity'"  sortable="'quantity'" filter="{ 'quantity': 'text' }">{{sryarnenquiry.quantity}} {{sryarnenquiry.quantity_unit}}</td>
                <td data-title="'Ex India Date'"  ng-hide="report" sortable="'ex_india_date'" filter="{ 'ex_india_date': 'text' }">{{sryarnenquiry.ex_india_date | date:'dd-MM-yyyy'}}</td>
                <td  data-title="'Supplier Name'"  sortable="'supplier_name'" filter="{ 'supplier_name': 'text' }">{{sryarnenquiry.supplier_name}}</td>
                 <td data-title="'Actual Devlivery Date'"  sortable="'actual_devlivery_date'" filter="{ 'actual_devlivery_date': 'text' }">{{sryarnenquiry.actual_devlivery_date | date:'dd-MM-yyyy'}}</td>

数据

{
"_id": "5909d10ff00c1c9b0e84ab64",
"user": {
"_id": "584ad334f8c0f4a31fe65e68",
"displayName": "sunil kumar"
},
"description_count": "checking",
"description_quality": "new",
"__v": 0,
"created": "2017-05-03T12:46:07.569Z",
"cone": "-",
"status": "quoted",
"currency": "Rs",
"unit": "KG",
"price": [
"200"
],
"actual_devlivery_date": "2017-05-09",
"ex_india_date": "2017-05-03",
"quantity_unit": "KG",
"quantity": "32",
"enquiry_received_date": "2017-05-17",
"supplier_name": "karikalan",
"buyer_name": "Mani selvam"
}

Answer 1

您可以使用现有的Angular指令来实现此目的。我建议ui-bootstrap（滚动到分页以获取文档）来执行此操作。我在plunker中创建了一个代码的工作示例。

 <pagination 
    ng-model="currentPage"
    total-items="sryarnenquiries.length"
    max-size="maxSize"  
    items-per-page=itemsPerPage
    boundary-links="true">
</pagination>

上面的代码用于分页控件。在你的控制器中，我定义了$scope.itemsPerPage，在你的情况下，我设置为10。我还在控制器中定义了$scope.currentPage = 1，否则它不会显示任何数据。

如何为angularjs创建分页？

1 个答案: