AngularJS實現分頁的例子介紹

來源:互聯網
上載者:User


初學 AngularJS, 嘗試著寫一些小功能

代碼邏輯寫得略粗糙,僅僅只是實現了簡單的分頁功能,使用 AngularJS 嘗嘗鮮。

AngularJS Code (Users.js)

var Users = angular.module('Users', []);
Users.controller('UserList', function($scope, $http) {
    $scope.start        = 0;
    $scope.showLimit    = 10;
    $scope.count        = 0;
    /* Default Users List */
    $http.get('welcome/get_users' + '/' + $scope.start + '/' + $scope.showLimit).success(function(data){
        $scope.users = data;
    });
    /* Count Users */
    $http.get('welcome/count_users').success(function(data){
        $scope.count = data;
    });
    /* Pagination */
    $scope.page = function (start) {
        $scope.start = start < 0 ? 0 : start;
        if (start >= $scope.count)   $scope.start = $scope.count - $scope.showLimit;
        $http.get('welcome/get_users' + '/' + $scope.start + '/' + $scope.showLimit).success(function(data){
            $scope.users = data;
        });
    }
});
HTML Code

<head>
    <script src="angular.js"></script>
    <script src="Users.js"></script>
</head>
<body ng-controller="UserList">
<div id="container">
    <div id="user_list">
        Search: <input class="query" type="text" ng-model="query" placeholder="Query">
        <hr />
        <table>
            <thead>
                <th>ID</th>
                <th>User Name</th>
                <th>Phone Number</th>
                <th>Email</th>
            </thead>
            <tbody>
                <tr ng-repeat="user in users | filter:query">
                    <td>{{user.id}}</td>
                    <td>{{user.user_name}}</td>
                    <td>{{user.phone_number}}</td>
                    <td>{{user.email}}</td>
                </tr>
            </tbody>
        </table>
        <hr />
        <button ng-click="page(0)">First</button>
        <button ng-click="page(start - showLimit)">Prev</button>
        <button ng-click="page(start + showLimit)">Next</button>
        <button ng-click="page(count - showLimit)">Last</button>
        <input type="text" ng-model="gotoPage" />
        <button ng-click="page(gotoPage * showLimit)">GO</button>
    </div>
</div>
</body>
CSS Code (稍微美化了一下)

body {
    background-color: #fff;
    margin: 40px;
    font: 13px/20px normal Helvetica, Arial, sans-serif;
    color: #4F5155;
}
#user_list {
    margin: 15px;
}
#container {
    margin: 10px;
    border: 1px solid #D0D0D0;
    box-shadow: 0 0 8px #D0D0D0;
}
input {
    width: 40px;
    height: 19px;
    padding: 3px;
    color: #555;
    border-radius: 3px;
    border: 1px solid #ccc;
}
input.query {
    width: 100px;
}
button {
    padding: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
td,th  {
    border: 1px solid #ccc;
    text-align: center;
    padding: 5px;
}
主要邏輯代碼都是寫死的,不靈活,慢慢改進吧。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.