描叙：使用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. 数据库sql语句常见面试题

    转载:本文转载自:https://blog.csdn.net/woshinidedege/article/details/78659202 一．有以下几张表及表结构Student(Sid,Sname, ...

  2. PHP全路径无限分类原理

    全路径无限分类:以一个字段把他所有的父级id按顺序记录下来以此实现的无限分类叫做全路径无限分类 优点:查询方便 缺点:增加,移动分类时数据维护时稍微复杂.

  3. 洛谷P2868 [USACO07DEC]观光奶牛Sightseeing Cows(01分数规划)

    题意 题目链接 Sol 复习一下01分数规划 设\(a_i\)为点权,\(b_i\)为边权,我们要最大化\(\sum \frac{a_i}{b_i}\).可以二分一个答案\(k\),我们需要检查\(\ ...

  4. Java的关键字

    下面列出Java关键字.这些保留字不能用于常量.变量和任标识示字符的名称 没事儿时多背背,对你没有坏处哒! 类别 关键字 说明 访问控制 private 私有的 protected 受保护的 publ ...

  5. Java 时间总结

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/80613024 本文出自[赵彦军的博客] 时区 整个地球分为二十四时区,每个时区都有 ...

  6. (网页)jQueryAJAXtimeout超时问题详解(转)

    先给大家分析下超时原因: 1.网络不通畅. 2.后台运行比较慢(服务器第一次运行时,容易出现) 超时结果:JQ中 timeout设置请求超时时间. 如果服务器响应时间超过了 设置的时间,则进入 ERR ...

  7. php 接口与前端数据交互实现

    最近在做前后端数据交互的尝试,也跳了很多坑,使用的是php+bootstrap-table+js,把一些收获记录在这里,方便查询. 这个小项目,仅有3个文件,分别为: crud.html data.p ...

  8. .net工具基础

    MSIL Disassembler(ildasm.exe) -- 将C#程序或类库反汇编处理,显示C#编译器生成的CIL代码 C:\Program Files\Microsoft SDKs\Windo ...

  9. selenium驱动程序下载和使用流程

    转自https://blog.csdn.net/weixin_42660771/article/details/81286982 1.下载地址    https://github.com/mozill ...

  10. 测试TCP 和 UDP 端口的方法

    测试 TCP 端口: telnel IP PORT nc -vz IP PORT 测试 UDP 端口: nc -vuz IP PORT 其中 -u 表示使用 udp 协议来进行测试. -u, --ud ...