【www.bbyears.com--js教程】
初学 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
<script src="angular.js"></script>
<script src="Users.js"></script>
Search:
{{user.id}}
{{user.user_name}}
{{user.phone_number}}
{{user.email}}
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;
}
主要逻辑代码都是写死的，不灵活，慢慢改进吧。