angular.js 渲染
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;
}
angular.js 渲染的更多相关文章
- angular.js ng-repeat渲染时出现闪烁问题解决
当我们前端运用到angular.js框架时,想必大家都会遇到一些坑.其中,我也来分享一个常见的angular.js渲染时出现的坑. 当我们进行页面渲染时,绑定表达式最开始会用{{data.name}} ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- (翻译)Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- Angular JS中$timeout的用法及其与window.setTimeout的区别
$timeout的用法 angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会 ...
- Angular JS笔记
1.引导程序 使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app ...
- 精通 Angular JS 第一天——Angular 之禅
简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单 ...
- Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
- Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- Angular.js vs Ember.js
Angular.js 拥抱 HTML/CSS Misko Hevery(Angular.js的开发者之一)回答了这一问题,他的主要观点如下: 在HTML中加入太多逻辑不是好做法.Angular.js只 ...
随机推荐
- [IoC容器Unity]第四回：使用范例
1.引言 前面几个章节介绍了Unity的基本使用,主要分为程序和配置文件两种方法的使用,可以参考一下链接, [IoC容器Unity]第一回:Unity预览 [IoC容器Unity]第二回:Lifeti ...
- 剑指offer 14：链表中倒数第k个节点
题目描述 输入一个链表,输出该链表中倒数第k个结点. /* public class ListNode { int val; ListNode next = null; ListNode(int va ...
- vue--transition-group
1.为什么要使用<transition-group> <transition></transition>是vue封装的过渡组件 <transition nam ...
- Apache和Nginx的区别
Nginx 轻量级,采用 C 进行编写,同样的 web 服务,会占用更少的内存及资源 抗并发,nginx 以 epoll and kqueue 作为开发模型,处理请求是异步非阻塞的,负载能力比 apa ...
- 博客搬家一下到CSDN
博客搬家一下到CSDN:http://blog.csdn.net/weixin_33409246
- go_micro相关书签
https://micro.mu/docs/cn/index.html gomicro文档 https://github.com/micro/go-micro gomicro代码 windows安装 ...
- 对XML里的属性或元素进行模糊搜索的方法
最近发现几个贴子都是问关于对XML的属性或元素进行模糊搜索的方法,在此发出代码片段示例,希望能够对你有所帮助:) 示例XML private var xml:XML=<employees> ...
- SVN上传文件自动更新到发布站点
源码安装svn, version 1.9.5 ###########服务端源码安装############# IP:192.168.1.13 安装依赖: # yum -y i ...
- 了解计算机与操作系统发展阶段以及android操作系统的发展史
计算机与操作系统发展阶段 计算机的发展: 第一代(1946-1957年),电子管计算机 第二代(1958-1964年),晶体管计算机 第三代 (1964—1970年),集成电路数字机 第四代 (19 ...
- composer的安装方法 以及 ThinkPHP5安装
1.下载installer的文件,使用浏览器开启链接:getcomposer.org/installer,下载如下文件到 E:\xs2016\composer, 将installer重命名为compo ...