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只 ...
随机推荐
- docker笔记（2）-----容器连接
2019-01-12 13:57:36 Dockerfile基本结构: 基础镜像内容:FROM指明base image 维护者信息: 镜像操作指令:RUN指令,每运行一条RUN指令,镜像添加新的一层 ...
- python pyqt绘制直方图
# -*- coding: utf-8 -*- """ In this example we draw two different kinds of histogram. ...
- Idea 里明明配置了Tomcat，但是右上角任然没有Tomcat显示
问题截图如下: 上图明明配置了Tomcat,但是Idea右上角任然是Add Configurations 因为这个问题,困扰了好久.解决方法: 点击Add Configurations 出现如下界 ...
- Ketlle
public class Kettle { private int volume; public Kettle(int water) { volume =water; System.out.pri ...
- p3966单词
后缀自动机版本: 所有的串用(char)('z'+1)连起来,然后建自动机.再用原串在自动机上跑.跑到的位置的endpos就是出现的次数.不过内存有点大. #include <iostream& ...
- maven介绍
Maven Maven的概念: Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具软件. Maven的作用: Maven可以帮助我们一键管理项目 1.管 ...
- 【ybt1252】走迷宫
(还是蛮经典的一道bfs) 显然算法bfs [传送门] 算法基本上算是bfs的模板了,(模板详见[新知识]队列&bfs[洛谷p1996约瑟夫问题&洛谷p1451求细胞数量]) #inc ...
- promise用法十道题
JS是单线程语言,多数的网站不需要大量计算,程序耗时主要是在磁盘I/O和网络I/O上 ,虽然固态硬盘SSD读取很快,但是和CPU比起来却不在一个数量级上,而且网络上的一个数据包来回时间更慢,所以一些C ...
- 命令“copy /V 已退出，代码为 1
这个错误出现在vs生成事件里的命令行里. 第一种:简单粗暴直接清空命令行 第二种:通过输出的打印结果来分析: 比如我的出现这个原因一般有两种情况: 第一种:是可能我引用的共享盘Z盘无法连接: 第二种: ...
- Redhat 6.3上安装CMake
在编译libssh时,要用到CMake,而且要依赖3.3以上的版本. 尝试了从CMake官网下载源码,编译安装.结果发现各种依赖,比如要升级GCC,升级Python等等,麻烦要死.搞了半天还是一堆问题 ...