AngularJs Ajax分页控件

1.分页控件定义：

控件源码+实例：http://git.oschina.net/tiama3798/AngularJsDemo/tree/pagerBar

 <pager-bar conf="pageConf"></pager-bar>

<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>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!