描叙：使用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搭建项目，实现隔行换色的更多相关文章

  1. Angular 学习笔记——ng-repeat 隔行换色

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  2. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  3. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  4. php29号小结（隔行换色······）

    1.给表单加样式,可以用css.php与js.js这三种,其中最好用php与js,现在很推广用这种. css3样式隔行换色(table中) tr:nth-child(even){ background ...

  5. table隔行换色

    以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...

  6. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  7. 纯CSS隔行换色

    原文:纯CSS隔行换色 <head> <meta http-equiv="Content-Type" content="text/html; chars ...

  8. jQuery实现table隔行换色和鼠标经过变色

    一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...

  9. JQuery案例一：实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. html5基础！！

    A:HTML5 不基于 SGML,所以不需要引用 DTD: B: HTML 4.01 基于 SGML,而HTML5不基于SGML: DTD可定义合法的XML文档构建模块,它使用一系列合法的元素来定义文 ...

  2. Chrome 开发者工具

    打开开发工具 (1)在Chrome菜单中选择 更多工具 > 开发者工具. (2)在页面元素上右键点击,选择 "检查". (3)使用快捷键 Ctrl+Shift+I (Wind ...

  3. es6 语法 （正则扩展）

    { //es5中 let regex = new RegExp('xyz', 'i'); let regex2 = new RegExp(/xyz/i); console.log(regex.test ...

  4. css不受高度限制实现文本超出隐藏并以省略号结束

    文本超出省略号显示代码: overflow: hidden; text-overflow:ellipsis; white-space: nowrap;width: 100px; /*宽度做好限制*/ ...

  5. iTools（pro）下载

    http://bbs.feng.com/forum.php?mod=viewthread&tid=10225990&page=1&extra=#pid157941878 htt ...

  6. loadrunner 脚本优化-参数化之Parameter List参数同行取值

    脚本优化-参数化之Parameter List参数同行取值 by:授客 QQ:1033553122 select next row 记录选择方式 Same line as,这个选项只有当参数多余一个时 ...

  7. C#生成唯一订单号

    今天系统出了一个问题,发现生成的订单号存在重复的情况了,这是要命的bug,不马上解决,就会有投诉了 经过改进后的代码我先简单的放一下,后面在慢慢的写清楚整个流程 string key = " ...

  8. Java synchronized解析

    多线程三大特性: 可见性.原子性.有序性 synchronize的特性: 1.同一时刻只有一个线程访问临界资源 2.其它未获取到锁执行权的线程必须排队等待 3.保证共享资源的原子性.可见性和有序性 4 ...

  9. sql server连接oracle并实现增删改查

    需要一个软件ODAC112040Xcopy_64bit 我连接的oracle是11g r2  sqlserver 是 2016 软件下载 https://pan.baidu.com/s/1OpYmpR ...

  10. SpringBoot实现热部署(修改class不需要重启)

    热部署: devtools可以实现页面热部署(即页面修改后会立即生效, 这个可以直接在application.properties文件中配置spring.thymeleaf.cache=false来实 ...