angular.js 渲染
阿新 • • 發佈：2017-07-06
span 全部 bsp input company break server renderer rip
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="1"> <%@ 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="18" 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">若頁面信息有任何問題，請及時與我們聯系：400-827-7760</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="68" height="68"> </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">+1</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 -1: $.tips.alert("未登錄或登錄已失效", function() { $.utils.login($.handler.ctx); }); break; case -8: $scope.votelist = { isExists : false }; break; case 1: $scope.imagerUrl = response.data.imager; $scope.votedetail = response.data; setTimeout(function(){ window.location.reload(); }, 300000); 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 1: $node.val(vote+1); var voteall = me.next(); var numall = parseInt(me.next().find("input").val())+1; voteall.val(numall); me.prev().show().fadeOut(1000); break; case -1: $.utils.login(""); break; case -31: $.tips.alert("單個痛客賬號1天最多只能投10票，您今天已投滿。還可以點擊服務商名稱，進入服務商主頁進行分享，為服務商拉票。"); break; case -32: $.tips.alert("本次投票活動已結束"); break; default: $.tips.alert("網絡請求錯誤"); break; } } }); }); /*我要分享*/ $(".btn_right").click(function(){ $(".fenxiang").show(); }); });
css
.main{ width:1200px; height:auto; margin:0 auto; min-height:400px; padding-bottom: 418px; } .vote_top { width: 100%; height: 390px; min-width: 1200px; border-bottom: 1px solid #ccc; background: url(/static/web-v2.0/images/best2017/end.jpg) no-repeat top center; } .return { width: 1200px; height: 30px; margin: 0 auto; color: #dae7f5; padding-top: 25px; font-size: 14px; } .return a { color: #DAE7F5; } .vote_nav { width: 1200px; height: 60px; margin: 0 auto; border-bottom: 1px solid #ccc; } /*投票詳情主體部分*/ .vote_main { width: 1200px; height: auto; margin: 0 auto; min-height: 550px; } .vote_title { width: 1200px; height: 100px; font-size: 24px; color: #333; line-height: 100px; text-align: center; } .vote_logo { width: 1200px; height: 140px; } .vote_logo_center { width: 130px; height: 130px; margin: 0 auto; border: 1px solid #e1e1e1; } .voteid { width: 1200px; height: 25px; text-align: center; font-size: 14px; color: #555555; } .num_name { width: 1200px; height: 35px; text-align: center; font-size: 14px; color: #555555; margin-left: -4px; } .num_name span { color: #f9a920; } .btn { width: 355px; height: 85px; margin: 0 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: #555555; margin: 0 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: -2.7rem; left: 4.3rem; color: #333; display: none; font-size: 20px; }
angular.js 渲染