描叙：使用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号小结（隔行换色&#183;&#183;&#183;&#183;&#183;&#183;）
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> ...
随机推荐
-
P2特征（一）
很多人在提到项目的特征,肯定能说出来很多的内容,但是在英国体系下,项目的特点有哪些呢?这些特点引深的内容又有什么深度的含义. 项目具有临时性:很多人都知道项目是临时的,结束了就团队成员 ...
-
jQuery 2.0.3 源码分析 回溯魔法 end()和pushStack()
了解了jQuery对DOM进行遍历背后的工作机制,可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能 从这章开始慢慢插入jQuery内部一系列工具方法的实现 关于jQuery对象的包 ...
-
C#与C++的区别！
(1) 编译目标:C++代码经常编译成汇编语言.而C#则编译成中间语言(IL)它与Java的字节代码有些相似.IL随后在通过Iust-In-Time编译进程转换成本机的可执行代码.IL代码将作为一个装 ...
-
一些相关的github
https://github.com/LTS4/DeepFool 貌似是说可以愚弄深度神经网络? https://github.com/tflearn/tflearn TF学习指南 http://gi ...
-
D3D Deferred Shading
在3D图形计算中,deferred shading是一个基于屏幕空间的着色技术.之所以被称为deferred shading,是因为我们将场景的光照计算与渲染"deferred"到 ...
-
date.plugin.js 日期插件
//定义命名空间 var DatePlugin; if (!DatePlugin) DatePlugin = {}; /*整理时间:2015-05-28*/ var defaultFormat = & ...
-
Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容
>>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...
-
nginx 配置身份验证 http_auth_basic_module
ngx_http_auth_basic_module模块实现访问必须输入用户名和密码 正确情况向访问,这为我们一些重要资源访问增添了一道安全锁. 语法: auth_basic_user_fil ...
-
npm run dev没反应
npm config set registry https://registry.npm.taobao.org npm install npm run dev
-
oracle使用 extract获取当前时间，并比较两个时间
--根据当前时间戳获取年月日时分秒,其中sysdate不能用于获取时分秒select systimestamp, extract(year from systimestamp) year ,extra ...