如何为 AngularJS 创建分页

Question

嗨，我想对表格进行分页。分页以使用角度js创建10组行数据一页另一组10行第二页。我尝试了很多方法，但如果有人知道解决方案，请帮助我，无法获得解决方案......演示链接已 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，否则它不会显示任何数据。