【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> ...
随机推荐
- react学习(三)之生命周期/refs/受控组件 篇
挂载/卸载 //在类组件中 class Clock extends React.Component { constructor(props) { super(props); this.state = ...
- 关于openSetting通过tap的调用
问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本 API和组件 小程序 Bug openSetting 工具 6.7.2 2.3.0 - 当前 Bug 的表现(可附上截图 ...
- JAVA 多线程（4）
接着3说: 一.String常量池 先回顾 java 的基本数据类型: 变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配 ...
- Web前端开发必备
前端学习相关书籍 关于书籍 HTML.CSS 类别书籍,都是大同小异,在当当网.卓越网搜索一下很多推荐.如果感觉学的差不多了,可以关注一下<CSS禅意花园>,这个很有影响力. Javasc ...
- django（python manage.py imgrate）同步数据库出错后的解决办法
问题 很多情况下,因为app的models.py的文件内容有误,但是通过python manage.py check检查不出来时,当执行python manage.py migra ...
- ionic 兼容title居中显示和tab栏在显示底部
在app.js里的 .config 里添加配置,同时在函数中引入 $ionicConfigProvider,具体格式如下所示: .config(function($stateProvider, $ur ...
- Android 7.0 新特性
Android7.0提供新功能以提升性能.生产效率和安全性. 关于Android N的性能改进,Android N建立了先进的图形处理Vulkan系统,能少的减少对CPU的占用.与此同时,Androi ...
- NoHttp封装--06 NoHttp之队列、队列优先级
public class Main { /** * 程序入口 */ public void start() { // 第一种,先进先出的队列 // YolandaLinkedQueue queue = ...
- Javascript数组系列三之迭代方法2
今天我们来继续 Javascript 数组系列的文章,上文 <Javascript数组系列二之迭代方法1> 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们 ...
- 测者的性测试手册：SWAP的监控
swap是什么 swap是磁盘上的一块区域,可以使一个磁盘分区,也可以是一个文件,也可能是一个两种的组合.当物理内存资源紧张的时候,操作系统(Linux)会将一些不常访问的数据放到swap里.为其他常 ...