Angular.js与与Bootstrap相结合实现表格分页代码相结合实现表格分页代码
先给大家简单介绍angular.js和bootstrap基本概念。
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使
得 Web 开发更加快捷。
最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页。
先上图看看最终结果:
不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能。
首先表格的数据源来自于,Server.js 点击下载。通过get取数后分页显示。
1.表格是通过表格是通过ng-repeat来展示的,代码如下:来展示的,代码如下:
<table class="table table-bordered">
<tr>
<th>index</th>
<th ng-repeat="(x,y) in items[0]">{{ x }}</th>
</tr>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td ng-bind="x.Name"></td>
<td ng-bind="x.City"></td>
<td ng-bind="x.Country"></td>
</tr>
</table>
$index是repeat的默认参数。表格的列头是通过数据源(json)的第一行循环取的key值。当然要是Bootstrap要指定table的
Class是table table-bordered。
2.分页是也是用分页是也是用ng-repeat,不得不说,不得不说ng-repeat是常用指令。是常用指令。
分页代码如下:
<nav>
<ul class="pagination">
<li>
<a ng-click="Previous()">
<span>上一页</span>
</a>
</li>
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" >
<a ng-click="selectPage(page)" >{{ page }}</a>
</li>
<li>
评论0
最新资源