1.分页控件定义:
控件源码+实例:http://git.oschina.net/tiama3798/AngularJsDemo/tree/pagerBar
<pager-bar conf="pageConf"></pager-bar>
2.使用实例:
<script src="~/Scripts/PagerBar/pagerBar.js"></script>
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<h2>AngularJs Ajax分页控件</h2>
<form class="form-inline">
<div class="form-group">
<label>请输入姓名:</label>
<input type="text" ng-model="name" />
</div>
</form>
<table class="table table-striped table-hover table-bordered" ng-cloak>
<thead>
<tr>
<td>#</td>
<td>ID</td>
<td>姓名</td>
<td>生日</td>
<td>修改</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in data">
<td>{{$index}}</td>
<td>{{emp.ID}}</td>
<td>{{emp.Name}}</td>
<td>{{emp.Birthday}}</td>
<td>
<a href="#" class="btn-link btn-sm">
编辑{{emp.ID}}
</a>
<a href="#" class="btn-link btn-sm">查看</a>
</td>
<td>
<button class="btn btn-default btn-xs">
<i class="fa fa-search"></i>
</button>
<button class="btn btn-success btn-xs">
<i class="fa fa-edit"></i>
</button>
<button class="btn btn-danger btn-xs">
<i class="fa fa-remove"></i>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr ng-show="data.length<=0">
<td>没有数据了...</td>
</tr>
</tfoot>
</table>
@*分页控件页面定义*@
<pager-bar conf="pageConf"></pager-bar>
</div>
Js代码:
var app = angular.module('myApp', ['pager'])
app.controller('myCtrl', function ($scope) {
//执行分页事件
function getPage() {
setTimeout(function () {
$scope.pageConf.currentPage = 1;
$scope.pageConf.getPageData({
url: '/page1/getlist2',
data: {
name: $scope.name
},
success: function (data) {
$scope.data = data;
$scope.$apply();
}
});
}, 200);
}
//监听属性变化
$scope.$watch('name', function (newValue, oldValue) {
if (newValue != oldValue) {
getPage();
}
});
getPage();
});