<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="js/angular-1.3.0.js"></script>

    <script>

        var m1 = angular.module('myApp',[]);

        m1.controller('may',['$scope',function($scope){

            $scope.dateList = ["aaaaa" ,"bbbbb" ,"ccccc", "ddddd" ];

        }]);

    </script>

    <style>

    .active1{

        background:red;

    }

    .active2{

        background: green;

    }

    </style>

</head>

<body ng-controller='may'>

    <ul>

        <li class="{{ $even ? 'active1' : 'active2'}}" ng-repeat="data in dateList">{{data}}</li>

    </ul>

    <div ng-repeat-start="data in dateList">{{data}}</div>

    <h1>{{data}}</h1>

    <div ng-repeat-end>{{data}}</div>

</body>

</html>

Angular 学习笔记——ng-repeat 隔行换色的更多相关文章

  1. 【angularjs】使用angular搭建项目，实现隔行换色

    描叙:使用ng-class实现每隔3行换色 代码: <!DOCTYPE html> <html ng-app="myApp"> <head> & ...

  2. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  3. JavaScript学习——表格的隔行换色+高亮显示

    1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...

  4. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  5. 纯CSS隔行换色

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

  6. Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  7. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  8. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  9. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  10. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

随机推荐

  1. Spacewalk server Installation on RHEL6

    [root@yum01 ~]# rpm -Uvh http://yum.spacewalkproject.org/2.1/RHEL/6/x86_64/spacewalk-repo-2.1-2.el6. ...

  2. Linux/unix inode

    一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统 ...

  3. 51Nod 1317 相似字符串对

    题目链接 分析: 考虑两个串的关系:$A+C=C+B$,我们观察可以发现,$A$和$B$是循环同构的,如果$A=G+H$,那么$B=H+G$,证明略长懒得写了... 我们知道$A$串有$K^N$种,所 ...

  4. css字体投影

    最近在整理学习CSS3的一些小知识,现在已经整理了CSS3选择器,CSS3圆角和CSS3元素阴影属性的使用方法了.今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法.希望能对大 ...

  5. [ CodeVS冲杯之路 ] P1295

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1295/ 数据很小,直接DFS,加上剪枝 剪枝其实就是判重,首先深度是行下标,这里自带不重复,枚举的列下标,用 f 记录 ...

  6. 【GDI+】MFC画图- 消除锯齿（转）

    原文转自 https://wenku.baidu.com/view/b5460979700abb68a982fbcf.html 在常规条件下,MFC画出来的图形.文字都是有锯齿的.如下图所示: 怎样才 ...

  7. 安装python 科学计算库

    http://www.softpedia.com/get/Programming/Other-Programming-Files/Python-x-y.shtml Pythonxy兴趣小组QQ群237 ...

  8. BeeFramework 系列

    http://ilikeido.iteye.com/category/281079 BeeFramework 系列三 MVC篇上 博客分类: Beeframework iphone开发 mvc框架Be ...

  9. 【原创】Linux环境下的图形系统和AMD R600显卡编程(10)——R600显卡的3D引擎编程

    3D图形处理流水线需要流经多个硬件单元才能得到最后的渲染结果,流水线上的所有的硬件单元必须被正确编程,才能得到正确的结果. 总体上看,从图形处理流水线的源头开始,需要准备好vertex和index,在 ...

  10. UVA 10330 Power Transmission

    题意:懒得打了.LUCKY CAT 里有 http://163.32.78.26/homework/q10330.htm 第一个网络流题目.每个节点都有一个容量值.需要拆点.拆成i - > i ...