【angularjs】使用angular搭建项目,实现隔行换色
描叙:使用ng-class实现每隔3行换色
代码:
<!DOCTYPE html>
<html ng-app="myApp"> <head>
<meta charset="UTF-8">
<title>隔行换色</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
ul{
list-style: none;
}
li{
height:24px;
line-height: 24px;
background:red;
}
.special-color{
background:#fff;
}
</style>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('CourseCtrl', function ($scope, $http) {
$scope.items = [0,1,2,3,4,5,6,7,8,9,10];
$scope.changeColor = function(index){
var bFlag = null;
(parseInt(index/3))%2 == 0 ? bFlag =true : bFlag = false;
return bFlag;
}
});
</script>
</head> <body ng-controller="CourseCtrl">
<ul class="container ">
<li ng-repeat="item in items" ng-class="{'special-color':changeColor($index)}">{{item}}</li>
</ul>
</body> </html>
作者:smile.轉角
QQ:493177502
【angularjs】使用angular搭建项目,实现隔行换色的更多相关文章
- Angular 学习笔记——ng-repeat 隔行换色
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- JQuery 表格 隔行换色 和鼠标滑过的样式
$(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
- php29号小结(隔行换色······)
1.给表单加样式,可以用css.php与js.js这三种,其中最好用php与js,现在很推广用这种. css3样式隔行换色(table中) tr:nth-child(even){ background ...
- table隔行换色
以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...
- table 表格隔行换色实现
table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 纯CSS隔行换色
原文:纯CSS隔行换色 <head> <meta http-equiv="Content-Type" content="text/html; chars ...
- jQuery实现table隔行换色和鼠标经过变色
一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...
- JQuery案例一:实现表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- for循环与forEach性能思考
今日看到一句话: 基于循环的迭代比基于函数的迭代法快8倍,因此有了该篇验证博客. 验证代码如图: 验证结果:在数量比较少的时候,无明显差别,当数量级达到10的4次方时候,for循环的效率优势明显:如图 ...
- Your local changes to the following files would be overwritten by merge:
在服务器改动之后,用sourcetree提交会产生冲突,解决办法:
- elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字
elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, ...
- POJ3734 Blocks(生成函数)
题意 链接 长度为\(n\)的序列,用红黄蓝绿染色,其中红黄只能是偶数,问方案数 Sol 生成函数入门题 任意的是\(e^x\),偶数的是\(\frac{e^x + e^{-x}}{2}\) 最后化完 ...
- 洛谷P4064 [JXOI2017]加法(贪心 差分)
题意 题目链接 Sol 这题就是一个很显然的贪心... 首先二分一个答案,然后check是否可行.check的时候我们需要对每个位置\(i\),维护出所有左端点在\(i\)左侧,右端点在\(i\)右侧 ...
- Android图片加载为什么选择glide
为什么图片加载我首先Glide 图片加载框架用了不少,从afinal框架的afinalBitmap,Xutils的BitmapUtils,老牌框架universalImageLoader,著名开源组织 ...
- Android星球效果实现
在项目中看着这个旋转效果挺炫的,就抽取出来做个记录.主要是使用CarrouselLayout 稍微修改 CarrouselLayout代码Demo下载z地址:GitHub https://github ...
- 移动Web前端,游客点击商品的收藏按钮,登录完成,回来之后,如何自动收藏
我们都知道,移动Web端(M站环境下),很多时候,前端是无法判断用户的登录状态的,因为出于安全性考虑,与账号相关的cookie字段一般都是 http-only的. 如果前端想判断用户的登录状态,需要主 ...
- MapReduce ----倒排索引
分别建立三个文件: file1txt file2.txt file3.txt 文件内容分别是: MapReduce is simple 和 MapReduce is powerful is simpl ...
- JavaWeb入门笔记
Java web笔记 一.HTTP协议 HTTP(超文本传输协议),它是一种主流B/S架构中应用的通信协议.具有以下特点: 1.无状态 服务端不会记录客户端每次提交的请求,服务器一旦相应客户端之后,就 ...