AngularJs Ajax分页控件

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();
});

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...