<!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. yum 和 apt-get

    yum 和apt-get 一般来说著名的linux系统基本上分两大类: 1.RedHat系列:Redhat.Centos.Fedora等 2.Debian系列:Debian.Ubuntu等 RedHa ...

  2. hdu 4359 dp

    /* 题目大意:给n个节点的二叉树第i个节点的权值为2^(i-1), 求所有含左右子树的节点都符合左子树的权和小于右子树权和的种数. */ #include <iostream> #inc ...

  3. parallel programming. this causual litery nots represents my recent progress in parallel programming in c#.It`s interesting.

    not to say extra words,let`s start the code. pasted below: using System; using System.Collections.Ge ...

  4. vue实现tab切换

    需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...

  5. 培训补坑（day3:网络流&最小割）

    继续补坑.. 第三天主要是网络流 首先我们先了解一下网络流的最基本的算法:dinic 这个算法的主要做法就是这样的: 在建好的网络流的图上从源点开始向汇点跑一遍BFS,然后如果一条边的流量不为0,那么 ...

  6. android hook 框架 xposed 如何实现挂钩

    Android so注入-libinject2 简介.编译.运行 Android so注入-libinject2  如何实现so注入 Android so注入-Libinject 如何实现so注入 A ...

  7. vue-cli 3.0脚手架与vux的配合使用

    在最近的项目中,引用了vux,在可拓展性以及复用性,都算是比较优秀的框架了.但是美中不足的是对于vux在对于vue-cli3.0的跟进还没有同步 需要自己做下修改,同比 有赞的vant 以及 ivie ...

  8. 想转行做web前端工程师，必学这6大技能

    web前端工程师是近几年才发展出来的新兴职业,也是目前火爆且高薪的职业.大需求的市场环境下,出现了越来越多的人群转行做web前端工程师,如设计师.后台程序员.网虫.大学其他专业.策划.编辑等等. 要学 ...

  9. HDU 6108.小C的倍数问题 (2017"百度之星"程序设计大赛 - 初赛（A）1001)

    补完题?不存在的. 这么久了,还是一条咸鱼,看一堆乱七八糟的东西,写一堆没用的水题,一点进步都没有,还是那么菜,菜的掉渣. 这个百毒之星初赛A还会写两道最简单的水题,初赛B一点也不会,菜的难过... ...

  10. Python Unittest与数据驱动

    python中有一个装饰器类DDT,通过它我们可以复用代码,达到数据驱动测试的目的,该类的官方介绍可以参考 http://ddt.readthedocs.io/en/latest/index.html ...