描叙：使用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. 去除input[type=number]的默认样式

    input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, in ...

  2. 2018-12-14 JavaScript实现ZLOGO: 前进方向和速度

    系列前文: JavaScript实现ZLOGO子集: 前进+转向 JavaScript实现ZLOGO子集: 单层循环功能 JavaScript实现ZLOGO子集: 测试用例 JavaScript实现Z ...

  3. Mysql 子查询

    一个 SELECT 语句中包含另一个或多个 SELECT 语句就是子查询 WHERE 后: 把 SELECT 查询出来的结果当做条件 # 查询和李四同性别的人 SELECT * FROM studen ...

  4. 教你分分钟搞定Docker私有仓库Registry

    一.什么是Docker私有仓库Registry 官方的Docker hub是一个用于管理公共镜像的好地方,我们可以在上面找到我们想要的镜像,也可以把我们自己的镜像推送上去.但是,有时候我们的服务器无法 ...

  5. iOS ----------如何修改mac的host文件

    第一步:前往文件夹 或者 按快捷键组合 Shift+Command+G 三个组合按键. 第二步:前往/private/etc/      找到Hosts 文件   复制到桌面    修改  然后  保 ...

  6. Markdown：常用语法

    1.标题 说明:一共可以6级标题,几级几个# 一级标题 #一级标题 2.代码 用前后扩上 Hello World! 3.代码块 用前后扩上 Hello World! 4.加粗 加粗了 **加粗了** ...

  7. [20181204]低版本toad 9.6直连与ora-12505.txt

    [20181204]低版本toad 9.6直连与ora-12505.txt --//我们生产系统还保留有一台使用AMERICAN_AMERICA.US7ASCII字符集的数据库,这样由于toad新版本 ...

  8. Visual Studio语言设置

    按照的是中文的visual studio,用起来很不方便,因为程序员的都是英文版,平时交流时也是英文的名字 转换语言时发现只有中文和跟随windows系统的设置 官方给的文档看的不是很清楚 查阅资料后 ...

  9. Hibernate 5 入门指南-基于类注解

    首先创建hibernate.cfg.xml配置文件并做简单的配置 <hibernate-configuration>    <session-factory>        & ...

  10. jar包导入导出

    java项目: 在classLoader加载jar和class的时候,是分开加载的,一般jar导入分两种: 1.在web-inf下的lib中直接引入 2.在user library上引入 无论以上哪种 ...