angular.js最初のプロジェクトの簡単なページング
4634 ワード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="pragram" content="no-cache">
<link rel="stylesheet" href="/css/group/base.css">
<link rel="stylesheet" href="/css/group/product_list.css">
<script type="text/javascript" src="/scripts/group/angular1.4.6.min.js"></script>
<title> </title>
</head>
<body>
<div ng-app="myGroups" ng-controller="groupsCtrl" when-scrolled="get_more(1)">
<ul>
<li>
</li>
<li ng-repeat="x in groups">
<div style="width:100px;float:left;">
<img style="width:100px;height:100px;" src="{{ x.img_url}}" />
</div>
<div style="width:200px;float:left;">
<div><a href="details.aspx?groupsid={{ x.groups_Id}}">{{ x.act_name}}</a></div>
<div>【{{ x.groups_size}} 】</div>
<div>{{ x.groups_price}}</div>
<div> ：{{ getState(x.groups_state)}}</div>
</div>
<div style="clear:both;"></div>
</li>
</ul>
：{{ totalcount}}
：{{ totalpage}}
：{{ pageindex}}
<button ng-click="get_more(-1)"> </button>
<button ng-click="get_more(1)"> </button>
</div>
<script>
var app = angular.module("myGroups",[]);
app.controller("groupsCtrl",["$scope","$http",function($scope,$http){
$scope.api='http://localhost:48732/groups/Default/GetGroupsByMobile';
$scope.pageindex=0;
$scope.pagesize = 10;
$scope.totalpage = 0;
$scope.totalcount = 0;
$scope.mobile = '<%=mobile%>';
$scope.groups = [];
$scope.getState = function (state) {
if (state == 0) {
return " "
} else if (state == 1) {
return " "
} else {
return " "
}
}
$scope.get_more = function (increase) {
$scope.pageindex += increase;
//if ($scope.pageindex<1) {
// $scope.pageindex = 1;
//}
//if ($scope.pageindex > $scope.totalpage && $scope.totalpage>0) {
// $scope.pageindex = $scope.totalpage;
//}
$http({
method: "POST",
url: $scope.api,
data:'mobile='+$scope.mobile+'&pageindex='+$scope.pageindex+'&pagesize='+$scope.pagesize,
headers: {'Content-Type': 'application/x-www-form-urlencoded'
}
}).
success(function (data, status) {
if (status == 200 && data.Success == 'true') {
$scope.totalpage = data.data.TotalPage;
$scope.totalcount = data.data.TotalCount;
for (var i = 0; i < data.data.PageData.length; i++) {
$scope.groups.push(data.data.PageData[i]);
}
//$scope.groups = data.data.PageData;
}
}).
error(function(data, status) {
});
}//get_more END
//
$scope.get_more(1);
}]);//controller END
</script>
</body>
</html>