場景
用angular js嘗試做一個活動用戶列表，每個用戶信息爲一行，點擊可以展開詳情
技術點
ng-repeat：動態循環生成html元素
ng-show：根據表達式判斷是否顯示。噹噹前用戶的排名不爲1或2時，顯示該用戶排名
<span ng-show="x.rank != 1&&x.rank != 2">{{x.rank}}</span>- ng-class：根據表達式判斷是否添加某類。噹噹前用戶爲本用戶時，添加font-orange類
<div ng-class="{'font-orange':x.userId == userId}"></div>- ng-click：添加點擊事件，並添加參數。當點擊某用於信息行，調用showDetails()方法，展開該用戶的詳細信息
<div class="row" ng-click="showDetails(x.rank)">點擊展開詳情</div>$scope.showDetails = function(rank){
for(var i=1;i<=$scope.lists.length;i++){
if(i==rank){
var res = 'showDetails'+rank;
$scope[res] = !$scope[res];
}else{
var res = 'showDetails'+i;
$scope[res] = false;
}
}
}其中，當變量名中包含參數時，用 $scope[變量名] 的方式調用
- infinite-scroll：angular js的屏幕滑動插件。當滾動到底時調用loadMore()方法
<div class="col-xs-12" ng-repeat="x in lists" ng-show="hasBegun" infinite-scroll='loadMore()'></div>完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>積分賽</title>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="./resources/js/jquery-1.11.1.min.js"></script>
<script src="./resources/js/angular/angular.js"></script>
<script src="./resources/js/customActivity/infiniteScroll.js"></script>
<script src="./resources/js/angular/angular-route.js"></script>
<link rel="stylesheet" type="text/css"
href="./resources/css/bootstrap.min.css">
<script>
var a=angular.module("calRun",['infinite-scroll']);
a.controller("calRunContrl",function($rootScope,$scope,$http){
$scope.lists = [];
var objs = getRequest();
$scope.userId = objs.userId;
console.log(objs);
var pageStart = 0;
var pageSize = 3;
var listOfAll = [];
initActivity();
initList();
function timeInterval(startTime,endTime){
var result = {day:0,hour:0,minute:0};
var interval = endTime-startTime;
result.day = Math.floor(interval/(1000*60*60*24));
result.hour = Math.floor((interval-1000*60*60*24*result.day)/(1000*60*60));
result.minute = Math.floor((interval-1000*60*60*24*result.day-1000*60*60*result.hour)/(1000*60));
return result;
}
function getRequest(){
var datas = location.search.substring(1).split("&");
var keys=[];
var values=[];
for(var i=0;i<datas.length;i++){
keys.push(datas[i].split("=")[0]);
values.push(datas[i].split("=")[1]);
}
var objs = new Object();
for(var i=0;i<keys.length;i++){
objs[keys[i]] = values[i];
}
return objs;
}
$scope.loadMore = function(){
initList();
}
$scope.showDetails = function(rank){
for(var i=1;i<=$scope.lists.length;i++){
if(i==rank){
var res = 'showDetails'+rank;
$scope[res] = !$scope[res];
}else{
var res = 'showDetails'+i;
$scope[res] = false;
}
}
}
$scope.showTime = function(time){
var hour = parseInt(time/3600);
var minute = parseInt((time%3600)/60);
var second = time%60 ;
if(hour<10){
hour = "0"+hour;
}
if(minute<10){
minute = "0"+minute;
}
if(second<10){
second = "0"+second;
}
return hour+":"+minute+":"+second;
}
function initActivity(){
$http({
method:'POST',
data:{
actId:objs.actId
},
params:{
userId:objs.userId,
appId:objs.appId,
methodName:'getCActivityDetail'
},
url:'newDEyesProxy'
})
.success(function(response){
if(response.startTime > (Date.now() / 1000)){
$scope.notEnd = true;
$scope.hasBegun = false;
$scope.ifStart = '距離活動開始還有';
$scope.day=timeInterval(Date.now(),response.startTime *1000).day;
$scope.hour=timeInterval(Date.now(),response.startTime *1000).hour;
$scope.minutes=timeInterval(Date.now(),response.startTime *1000).minute;
}else if(response.endTime < (Date.now() / 1000)){
$scope.notEnd = false;
$scope.hasBegun = true;
}else{
$scope.notEnd = true;
$scope.hasBegun = true;
$scope.ifStart = '距離活動結束還有';
$scope.day=timeInterval(Date.now(),response.endTime *1000).day;
$scope.hour=timeInterval(Date.now(),response.endTime *1000).hour;
$scope.minutes=timeInterval(Date.now(),response.endTime *1000).minute;
}
})
.error(function(){
alert("ERROR!");
})
}
function initList(){
$http({
method:'POST',
data:{
actId : objs.actId,
type : 5,
pageStart : pageStart,
pageSize : pageSize
},
params:{
userId:objs.userId,
appId:objs.appId,
methodName:'getCActivityRank'
},
url:'newDEyesProxy'
})
.success(function(response){
$scope.lists = $scope.lists.concat(response.rankList);
// console.log($scope.lists);
if(response.rankList.length == pageSize){
$scope.isMore = true;
}else{
$scope.isMore = false;
}
if($scope.lists.length == 100){
$scope.moreThan100 = true;
}
})
pageStart += pageSize;
}
})
</script>
</head>
<body class="bg" style="margin-bottom:0;padding-bottom: 0;max-width: 420px" ng-app="calRun" ng-controller="calRunContrl">
<div style="display:none" id="ifrContainer"></div>
<div class="container">
<div id="main">
<div class="row">
<!--<img id="poster" src="" />-->
<img id="poster" src="" />
</div>
<div class="both-border">
<div id="chatRoom" class="col-xs-3 left-border right-border" style="padding: 0px;height:3rem;">
聊天室<br/>
<img src="resources/images/customActivity/6/[email protected]" style="height:1.666667rem;width:auto;">
</div>
<div class="col-xs-9 right-border left-border" style="padding: 0px;height:3rem;">
<div id="actBeforeEnd" ng-show="notEnd">
<span id="actState">{{ifStart}}</span>
<div style="padding-left:0.2rem;text-align:center;">
<span id="day" class="time-number">{{day}}</span>
<span class="time-lable">天</span>
<span id="hour" class="time-number">{{hour}}</span>
<span class="time-lable">時</span>
<span id="minute" class="time-number">{{minutes}}</span>
<span class="time-lable">分</span>
</div>
</div>
<div id="actEnd" ng-show="!notEnd">
<img src="resources/images/customActivity/6/icon_ [email protected]" style="width: 10.833333rem">
</div>
</div>
</div>
<div class="row" style="margin-top:1px;border-radius:5px;">
<div class="row" style="color:#999;background-color:#2d2d38;margin:0 0.4167rem 0 0.4167rem;border-radius:5px;">
<div class="col-xs-12 bg-dark" style="border-top-left-radius:5px;border-top-right-radius:5px;">
<div class="switch-bar">燃燒排行榜</div>
</div>
<div id="topRow" class="col-xs-12" style="height:2rem;">
<div class="row" style="height:2rem;line-height:2rem;color:#999;font-size:1rem;">
<div class="col-xs-12">
<div class="col-xs-8" style="padding-left:0;border-bottom:0.5px solid #24242c">參賽者</div>
<div class="col-xs-4" style="text-align:right;padding:0;border-bottom:0.5px solid #24242c">消耗</div>
</div>
</div>
</div>
<div id="list" class="col-xs-12" style="z-index:100;" ng-repeat="x in lists" ng-show="hasBegun" infinite-scroll='loadMore()'>
<div class="perPerson col-xs-12" ng-class="{'font-orange':x.userId == userId}">
<div class="row" ng-click="showDetails(x.rank)">
<div class="col-xs-2 rankDiv">
<img src="resources/images/customActivity/6/icon_ [email protected]" ng-show="x.rank == 1">
<img src="resources/images/customActivity/6/icon_ [email protected]" ng-show="x.rank == 2">
<img src="resources/images/customActivity/6/[email protected]" ng-show="x.rank == 3">
<span ng-show="x.rank != 1&&x.rank != 2&&x.rank != 3">{{x.rank}}</span></div>
<div class="col-xs-2 imgDiv">
<img ng-src="downloadImgFromDB?appId=00100601_2.1.10&resId={{x.userId}}&resType=0&format=0&resVersion={{x.version}})">
</div>
<div class="col-xs-6 nameDiv">{{x.nickName}}</div>
<div class="col-xs-2 scoreDiv">{{x.calorie}}千卡</div>
</div>
<div class="details row" ng-show="showDetails{{x.rank}}">
<div class="col-xs-4 perLineDiv">
<span class="span0">里程：</span>
<span class="span1">{{(x.sumLength/1000).toFixed(2)}}km</span>
</div>
<div class="col-xs-4 perLineDiv">
<span class="span0">時長：</span>
<span class="span1">{{showTime(x.sumTimeSpan)}}</span>
</div>
<div class="col-xs-4 perLineDiv">
<span class="span0">耗脂：</span>
<span class="span1">{{x.sumFat.toFixed(2)}}g</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fresh">
<div class="freshDiv" ng-show="isMore&&!moreThan100">
<p>鬆開刷新</p>
</div>
<div class="freshDiv" ng-show="!isMore&&!moreThan100">
<p>沒有更多</p>
</div>
<div class="freshDiv" ng-show="moreThan100">
<p>活動排行只顯示前100名<br/>我已經被你看光啦.... </p>
</div>
</div>
</div>
</div>
</body>
</html>