描叙：使用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. javascript模块化编程-立即执行函数（IIFE）

    IIFE 全拼Imdiately Invoked Function Expression,立即执行的函数表达式. 语法 var module1 = (function(){ var _count = ...

  2. iOS---------Xcode中添加预编译pch文件

    第一步:打开项目,com+N,将页面滑动最下面如图 第二步:创建pch文件 第三步:修改buildsetting配置文件       在搜索框里输入prefix搜索一下,比较好找      1.将Pr ...

  3. ubuntu12.0.4开启root用户登陆

    1.命令:sudo passwd root 为root分配密码,按提示进行设置就好. 2.打开终端,输入以下命令: sudo -s 进入root账户下: cd /etc/lightdm       g ...

  4. Android 底部导航栏实现一 Fragment-replace

    [效果](这里下载的软件收费的试用有水印) [推荐]这里推荐一个图标网http://iconfont.cn/.以上图标来自此图标网 [项目结构] [步骤] ①创建布局文件,写底部导航栏 <?xm ...

  5. python语言学习--1

    第一天 item: 当字符串中出现 反斜杠'\' 时,输出时会把它当做转义字符处理,所以结果中不会出现它,若要正常输出则需要在字符串前面加上r, 我想r的意思是religion即“原始”的意思: it ...

  6. Flutter 布局（二）- Padding、Align、Center详解

    本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Padding A widget that insets ...

  7. Linux-pthread如何设置线程的优先级

    设置线程优先级的函数: int pthread_setschedparam(pthread_t target_thread, int policy, const struct sched_param ...

  8. 巧用 即刻搜索事件 input propertychange 监听输入框字数

    实时监听输入框的字数,大于200时,不再输入. 即时搜索: propertychange(ie)和input事件(常用) input是标准的浏览器事件,一般应用于input元素,当input的valu ...

  9. WordCount作业修改

    WordCount作业修改 github地址 需求说明 基本需求 功能说明 PSP 代码实现 字符总数查询 单词数查询 行数查询 总结 一.需求说明 1.基本需求 WordCount的需求可以概括为: ...

  10. 2017 Pig-0.16.0安装

    前提:已经装好hadoop2.7.3 单机版本: export PIG_HOME=/usr/local/pig    export PATH=$PATH:$PIG_HOME/bin 运行:pig -x ...