angular.js 小常识 具体看代码，转载请备注来源。
html结构
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../host.jsp"%>
<%@ include file="../common.jsp"%>
<!DOCTYPE html>
<html ng-app="votelist">
<head>
<title>xxxxxxxxxxxxx</title>
<meta name="Keywords" content="xxxxxxxxxx">
<meta name="description" content="xxxxxxxxxxxxxx">
<meta name="renderer" content="webkit">
<meta name="applicable-device" content="pc">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Cache-Control" content="no-transform">
<meta name="application-name" content="xxxxxxxxxxxxxx">
<meta name="baidu-site-verification" content="gGV6AIImUh" />
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32">
<link rel="stylesheet" href="/static/web-v2.0/css/libs/cssreset-min.css?v=${version}">
<link rel="stylesheet" href="/static/web-v2.0/css/pages/public.css?v=${version}">
<link rel="stylesheet" href="/static/web-v2.0/css/pages/best2017/votelist.css?v=${version}">
<link rel="stylesheet" href="/static/web-v2.0/css/pages/usercenter/mycenter/ng-pagination.css?v=${version}">
<script type="text/javascript" src="/static/web-v2.0/js/lib/jquery-1.11.1.min.js?v=${version}"></script>
<script type="text/javascript" src="/static/web-v2.0/js/lib/jutils.js?v=${version}"></script>
<script type="text/javascript" src="/static/js/lib/tips.js?v=${version}"></script>
<script type="text/javascript" src="/static/web-v2.0/js/lib/angular.min.js?v=${version}"></script>
<script type="text/javascript" src="/static/web-v2.0/js/page/usercenter/mycenter/ng-pagination.js?v=${version}"></script>
<script type="text/javascript" src="/static/web-v2.0/js/page/best2017/lazyload.js?v=${version}"></script>
<script type="text/javascript" src="/static/web-v2.0/js/page/best2017/votelist.js?v=${version}"></script>
</head>
<body ng-controller="votelistController" data-identity="">
<%@ include file="../serverlib/header.jsp" %>
<div class="vote_top">
<div class="return">
<a href="/top50">< 返回活动主页，了解更多</a>
</div>
</div>
<div class="main clearfix">
<div class="vote_nav clearfix">
<ul>
<li class="vote_nav_one vote_in">按编号</li>
<li class="vote_nav_one active num_in">按票数</li>
</ul>
<!-- <div class="vote_nav_three">
<div class="serch clearfix">
<input class="input_text" id="input_text" placeholder="输入公司名称或编号进行搜索" type="tel">
<img src="/static/web-v2.0/images/best2017/serch.jpg" class="serch_da" id="serch_da">
</div>
</div> -->
<div class="vote_nav_three">
<div class="serch clearfix">
<input class="input_text" id="input_text" maxlength="" placeholder="输入公司名称或编号进行搜索" type="tel">
<img src="/static/web-v2.0/images/best2017/guanbis.png" class="serch_da" ng-click="clearOrders();">
<span class="serch_zi">搜索</span>
</div>
</div>
</div>
<div class="tishi">若页面信息有任何问题，请及时与我们联系：--</div>
<div id="vote_main" class="vote_main">
<ul class="clearfix">
<li ng-repeat="vote in votelist.list" on-finish-render-filters data-id="{{vote.id}}" ng-show="votelist.list.length">
<div class="vote_li">
<a ng-href="${requestScope.ctx}/top50/vote/detail?caseId={{vote.id}}">
<div class="main_left">
<img ng-src="{{imagerUrl+vote.logoUrl}}" data-original="{{imagerUrl+vote.logoUrl}}" width="" height="">
</div>
</a>
<div class="main_right">
<div class="main_title">
<a ng-href="${requestScope.ctx}/top50/vote/detail?caseId={{vote.id}}"><span ng-bind="vote.companyName"></span></a>
</div>
<div class="main_id clearfix">
<div class="main_idleft">ID:<span ng-bind="vote.serialNo"></span></div>
<div class="main_idright" ng-show="tag"><img src="/static/web-v2.0/images/best2017/paiming.png" /><span>NO.<span ng-bind="vote.rank"></span></span></div>
</div>
<div class="main_btn clearfix">
<!-- <div class="text_line">+</div> -->
<div class="btn_zan"><img src="/static/web-v2.0/images/best2017/toupiao.jpg" class="tou_photo"><span>投票</span></div>
<div class="btn_piao" ng-cloak><input id="add" type="text" value="{{vote.vote}}" disabled="disabled" />票</div>
</div>
</div>
</div>
</li>
</ul>
<div ng-if="loading" style="width:300px;height:300px;margin:0 auto;text-align:center;font-size:14px;" ng-cloak>
<img src="/static/web-v2.0/images/serverlib/public/tail-spin.svg" style="display:block;margin:180px auto 10px auto;">
<p>正在加载中...</p>
</div>
<!-- 无数据空页面状态的时候 -->
<div class="kong" ng-if="response.code==-8" ng-if="!loading">
<div class="zanwei">暂未搜索出相关服务商</div>
<div class="kongs"><a href="/serverlib/transfer?pagepath=/best2017/votelist">返回投票中心，查看全部服务商</a></div>
</div>
</div>
<!--分页部分-->
<div class="paging" ng-show="response.code==1">
<pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" next-text="»" prev-text="«"></pager>
</div>
</div>
<%@ include file="../serverlib/footer.jsp" %>
</body>
</html>
js结构
var app = angular.module("votedetail",[]);
/*加载投票服务商详情数据*/
app.controller('votedetailController', function($scope, $http , $sce) {
$http({
method : 'get',
url:'/serverlib/csu/view?id='.concat($("body").data("line-id")),
}).success(function(response) {
$scope.response = response;
switch (response.code) {
case -:
$.tips.alert("未登录或登录已失效", function() {
$.utils.login($.handler.ctx);
});
break;
case -:
$scope.votelist = {
isExists : false
};
break;
case :
$scope.imagerUrl = response.data.imager;
$scope.votedetail = response.data;
setTimeout(function(){
window.location.reload();
}, );
break;
default:
$.tips.alert("网络请求错误");
break;
}
});
//投票功能
$(".btn_left").click(function() {
var me = $(this);
var id = me.attr("data-line-id");
var id = $("body").attr("data-line-id"), $node = $("#add"), vote = +$node.val();
$.ajax({
type : "POST",
url : "/serverlib/csu/vote",
async: false,
dataType : "json",
data : {id : id},
success : function(result) {
switch (result.code) {
case :
$node.val(vote+);
var voteall = me.next();
var numall = parseInt(me.next().find("input").val())+;
voteall.val(numall);
me.prev().show().fadeOut();
break;
case -:
$.utils.login("");
break;
case -:
$.tips.alert("单个痛客账号1天最多只能投10票，您今天已投满。还可以点击服务商名称，进入服务商主页进行分享，为服务商拉票。");
break;
case -:
$.tips.alert("本次投票活动已结束");
break;
default:
$.tips.alert("网络请求错误");
break;
}
}
});
});
/*我要分享*/
$(".btn_right").click(function(){
$(".fenxiang").show();
});
});
css
.main{
width:1200px;
height:auto;
margin: auto;
min-height:400px;
padding-bottom: 418px;
}
.vote_top {
width: %;
height: 390px;
min-width: 1200px;
border-bottom: 1px solid #ccc;
background: url(/static/web-v2./images/best2017/end.jpg) no-repeat top center;
}
.return {
width: 1200px;
height: 30px;
margin: auto;
color: #dae7f5;
padding-top: 25px;
font-size: 14px;
}
.return a {
color: #DAE7F5;
}
.vote_nav {
width: 1200px;
height: 60px;
margin: auto;
border-bottom: 1px solid #ccc;
}
/*投票详情主体部分*/
.vote_main {
width: 1200px;
height: auto;
margin: auto;
min-height: 550px;
}
.vote_title {
width: 1200px;
height: 100px;
font-size: 24px;
color: #;
line-height: 100px;
text-align: center;
}
.vote_logo {
width: 1200px;
height: 140px;
}
.vote_logo_center {
width: 130px;
height: 130px;
margin: auto;
border: 1px solid #e1e1e1;
}
.voteid {
width: 1200px;
height: 25px;
text-align: center;
font-size: 14px;
color: #;
}
.num_name {
width: 1200px;
height: 35px;
text-align: center;
font-size: 14px;
color: #;
margin-left: -4px;
}
.num_name span {
color: #f9a920;
}
.btn {
width: 355px;
height: 85px;
margin: auto;
position: relative;
}
.btn_left {
width: 165px;
height: 45px;
background: #f9a920;
color: #fff;
float: left;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
text-align: center;
}
.btn_left span {
margin-left: 21px;
line-height: 40px;
}
.btn_right {
width: 165px;
height: 45px;
background: #009ca8;
color: #fff;
float: left;
border-radius: 4px;
font-size: 16px;
text-align: center;
margin-left: 20px;
cursor: pointer;
}
.toupiao {
position: absolute;
margin-top: 11px;
}
.btn_right span {
margin-left: 21px;
line-height: 40px;
}
.content {
width: 715px;
height: auto;
min-height: 50px;
font-size: 14px;
color: #;
margin: auto;
line-height: 25px;
}
#add {
height: 30px;
background: #fff;
line-height: 30px;
font-size: 14px;
width: 47px;
color: #f9a920;
border: none;
text-align: right;
}
.fenxiang{
width: 177px;
height: 30px;
margin-left: 800px;
margin-top: -86px;
position: absolute;
}
.text_line{
position: absolute;
top: -.7rem;
left: .3rem;
color: #;
display: none;
font-size: 20px;
}