首页 > 代码库 > angular.js 渲染

angular.js 渲染

2024-10-17 19:19:39   212人阅读

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=http://www.mamicode.com/"/favicon.ico">
    <link rel="icon" href=http://www.mamicode.com/"/favicon.ico" sizes="16x16 32x32">
    <link rel="stylesheet" href=http://www.mamicode.com/"/static/web-v2.0/css/libs/cssreset-min.css?v=${version}">
    <link rel="stylesheet" href=http://www.mamicode.com/"/static/web-v2.0/css/pages/public.css?v=${version}">
    <link rel="stylesheet" href=http://www.mamicode.com/"/static/web-v2.0/css/pages/best2017/votelist.css?v=${version}">
    <link rel="stylesheet" href=http://www.mamicode.com/"/static/web-v2.0/css/pages/usercenter/mycenter/ng-pagination.css?v=${version}">
    <script type="text/javascript" src=http://www.mamicode.com/"/static/web-v2.0/js/lib/jquery-1.11.1.min.js?v=${version}"></script>
    <script type="text/javascript" src=http://www.mamicode.com/"/static/web-v2.0/js/lib/jutils.js?v=${version}"></script>
    <script type="text/javascript" src=http://www.mamicode.com/"/static/js/lib/tips.js?v=${version}"></script>
    <script type="text/javascript" src=http://www.mamicode.com/"/static/web-v2.0/js/lib/angular.min.js?v=${version}"></script>
    <script type="text/javascript" src=http://www.mamicode.com/"/static/web-v2.0/js/page/usercenter/mycenter/ng-pagination.js?v=${version}"></script>
    <script type="text/javascript" src=http://www.mamicode.com/"/static/web-v2.0/js/page/best2017/lazyload.js?v=${version}"></script>
    <script type="text/javascript" src=http://www.mamicode.com/"/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=http://www.mamicode.com/"/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=http://www.mamicode.com/"/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=http://www.mamicode.com/"/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=http://www.mamicode.com/"${requestScope.ctx}/top50/vote/detail?caseId={{vote.id}}">
                            <div class="main_left">
                                <img ng-src=http://www.mamicode.com/"{{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=http://www.mamicode.com/"${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=http://www.mamicode.com/"/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=http://www.mamicode.com/"/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=http://www.mamicode.com/"{{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=http://www.mamicode.com/"/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=http://www.mamicode.com/"/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="&raquo;" prev-text="&laquo;"></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 渲染


联系
我们