angular.js 渲染

2021-07-02 21:04
阅读：448
YPE html>
标签：serial comm and ice 页面 filters ng-repeat bind pager
angular.js 小常识具体看代码，转载请备注来源。
html结构
"java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
"../host.jsp"%>
"../common.jsp"%>

"votelist">xxxxxxxxxxxxx"Keywords" content="xxxxxxxxxx">
    "description" content="xxxxxxxxxxxxxx">
    "renderer" content="webkit">
    "applicable-device" content="pc">
    "X-UA-Compatible" content="IE=Edge">
    "Cache-Control" content="no-transform">
    "application-name" content="xxxxxxxxxxxxxx">
    "baidu-site-verification" content="gGV6AIImUh" />
    "shortcut icon" href="/favicon.ico">
    "icon" href="/favicon.ico" sizes="16x16 32x32">
    "stylesheet" href="/static/web-v2.0/css/libs/cssreset-min.css?v=${version}">
    "stylesheet" href="/static/web-v2.0/css/pages/public.css?v=${version}">
    "stylesheet" href="/static/web-v2.0/css/pages/best2017/votelist.css?v=${version}">
    "stylesheet" href="/static/web-v2.0/css/pages/usercenter/mycenter/ng-pagination.css?v=${version}">
    "votelistController" data-identity="1">
    "../serverlib/header.jsp" %>
    class="vote_top">
        class="return">
            "/top50">
    

    class="main clearfix">
        class="vote_nav clearfix">
            
class="vote_nav_one vote_in">按编号
                class="vote_nav_one active num_in">按票数
            
class="vote_nav_three">
                class="serch clearfix">
                    class="input_text" id="input_text" maxlength="18" placeholder="输入公司名称或编号进行搜索" type="tel">
                    "/static/web-v2.0/images/best2017/guanbis.png" class="serch_da"  ng-click="clearOrders();">
                    class="serch_zi">搜索
                
            
        
        class="tishi">若页面信息有任何问题，请及时与我们联系：400-827-7760

        "vote_main" class="vote_main">
            class="clearfix">
                "vote in votelist.list" on-finish-render-filters data-id="{{vote.id}}" ng-show="votelist.list.length">
                    class="vote_li">
                        "${requestScope.ctx}/top50/vote/detail?caseId={{vote.id}}">
                            class="main_left">
                                "{{imagerUrl+vote.logoUrl}}" data-original="{{imagerUrl+vote.logoUrl}}" width="68" height="68">
                            
                        
                        class="main_right">
                            class="main_title">
                                "${requestScope.ctx}/top50/vote/detail?caseId={{vote.id}}">"vote.companyName">
                            

                            class="main_id clearfix">
                                class="main_idleft">ID:"vote.serialNo">
                                class="main_idright" ng-show="tag">"/static/web-v2.0/images/best2017/paiming.png" />NO."vote.rank">

                            
                            class="main_btn clearfix">
                                
                                class="btn_zan">"/static/web-v2.0/images/best2017/toupiao.jpg" class="tou_photo">投票

                                class="btn_piao" ng-cloak>"add" type="text" value="{{vote.vote}}" disabled="disabled" />票
                            
                        
                    

                
            
if="loading" style="width:300px;height:300px;margin:0 auto;text-align:center;font-size:14px;" ng-cloak>
                 "/static/web-v2.0/images/serverlib/public/tail-spin.svg" style="display:block;margin:180px auto 10px auto;">
                 正在加载中...
            
            
            class="kong" ng-if="response.code==-8" ng-if="!loading">
                class="zanwei">暂未搜索出相关服务商
                class="kongs">"/serverlib/transfer?pagepath=/best2017/votelist">返回投票中心，查看全部服务商

            
        
        
        class="paging" ng-show="response.code==1">
            "pageCount" current-page="currentPage" on-page-change="onPageChange()" next-text="»" prev-text="«">

    
    "../serverlib/footer.jsp" %>



  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  渲染
标签：serial   comm   and   ice   页面   filters   ng-repeat   bind   pager   
原文地址：http://www.cnblogs.com/zhangyingqin/p/7127195.html