Beginner Angularjs, try to write a few small functions
Code logic is slightly rough, just to achieve a simple paging function, the use of Angularjs taste fresh.
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
<script src= "Angular.js" ></script>
<script src= "Users.js" ></script>
<body ng-controller= "UserList" >
<div id= "Container" >
<div id= "User_list" >
Search: <input class= "Query" type= "text" ng-model= "query" placeholder= "Query" >
<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>
<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 (a little landscaping)
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;
}
The main logic code is written dead, not flexible, slowly improve it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
