转自：https://www.cnblogs.com/best/tag/Angular/

AngularJS模板使你可以把该作用域内的数据直接绑定到所显示的HTML元素

ng-class-even与ng-class类似，ng-repeat中偶数时应用

ng-class-odd与ng-class类似，ng-repeat中奇数时应用

<p ng-repeat="a in animals" ng-class-odd="'odd'" ng-class-even="'even'">
   {{a.name}}
</p>

示例代码：

 <!DOCTYPE html>

 <!--指定angular管理的范围-->

 <html ng-app="app01">

     <head>

         <meta charset="UTF-8">

         <title>指令</title>

         <style>

             .bg1{

                 background: lightcoral;

                 color:white;

             }

             .bg2{

                 background: lightpink;

                 color: white;

             }

         </style>

     </head>

     <body>

         <!--指定控制器的作用范围-->

         <form ng-controller="Controller1" name="form1">

             <ul>

                 <li ng-repeat="u in users" ng-class-even="'bg1'" ng-class-odd="'bg2'">

                     {{u.name}}

                 </li>

             </ul>

         </form>

         <!--引入angularjs框架-->

         <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             //定义模块，指定依赖项为空

             var app01 = angular.module("app01", []);

             //定义控制器，指定控制器的名称，$scope是全局对象

             app01.controller("Controller1", function($scope) {

                 $scope.users = [{

                     id: 1,

                     name: "tom",

                     sex: "男",

                     age: 19

                 }, {

                     id: 2,

                     name: "rose",

                     sex: "女",

                     age: 18

                 }, {

                     id: 7,

                     name: "jack",

                     sex: "男",

                     age: 16

                 }, {

                     id: 9,

                     name: "lucy",

                     sex: "女",

                     age: 20

                 }, {

                     id: 15,

                     name: "mark",

                     sex: "男",

                     age: 89

                 }];

             });

         </script>

     </body>

 </html>

运行结果：

10.ng-class-even与ng-class-odd的更多相关文章

  1. 不知道张(zhāng)雱（pāng）是谁？你out了！

    张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...

  2. ng build --aot 与 ng build --prod

    angluar的编译有以下几种方式: ng build  常规的压缩操作    代码体积最大 ng build --aot   angular预编译      代码体积较小 ng build --pr ...

  3. 高可用Hadoop平台－Flume NG实战图解篇

    1.概述 今天补充一篇关于Flume的博客,前面在讲解高可用的Hadoop平台的时候遗漏了这篇,本篇博客为大家讲述以下内容: Flume NG简述 单点Flume NG搭建.运行 高可用Flume N ...

  4. 【码在江湖】前端少侠的json故事（中）ng的json

    ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...

  5. Ngnice-国内ng学习网站

    今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...

  6. 国内ng学习网站

    Ngnice-国内ng学习网站2015-01-25 21:30 by 破狼, 534 阅读, 3 评论,收藏, 编辑 今天给angular新手介绍一个国内开源的ng学习网站http://www.ngn ...

  7. ng环境搭建步骤

    1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...

  8. Ng Alain使用 - cli和克隆两种方式

    感觉没啥要写的,但是在查看相关资料的过程中发现不少浮夸的人,可以说是完全不阅读官方文档,操作完全无厘头,,创建了删,配置,再删除,,,扯蛋....., 方式一:CLI(推荐) # 确保使用的是最新版本 ...

  9. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  10. angular2 ng build --prod 报错：Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

    调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir ...

随机推荐

  1. [APIO2014]回文串（回文自动机）

    题意 给你一个由小写拉丁字母组成的字符串 s.我们定义 s 的一个子串的存在值为这个子串在 s 中出现的次数乘以这个子串的长度. 对于给你的这个字符串 s,求所有回文子串中的最大存在值. |S|< ...

  2. spring boot ---web应用开发-错误处理

    一．错误的处理 方法一:Spring Boot 将所有的错误默认映射到/error, 实现ErrorController @Controller @RequestMapping(value = &qu ...

  3. Git 修改commit message

    1.git log --oneline -5 查看最近5次commit的简要信息,输出信息为:简短commitID commit_message,可以根据需要查看最近n次的提交 也可以git log ...

  4. 【BZOJ 1257】[CQOI2007]余数之和

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] k%i=k-(k/i)i 则∑k%i = nk-∑(k/i)*i 因为k/i是整除运算. 所以会有某一段连续的i,它们的k/i的值都 ...

  5. Regular Expressions Syntax

    https://support.syslogwatcher.com/support/solutions/articles/8000033627-regular-expressions-syntax

  6. Qt之QTemporaryFile

    简述 QTemporaryFile类是操作临时文件的I/O设备. QTemporaryFile用于安全地创建一个独一无二的临时文件.临时文件通过调用open()来创建,并且名称是唯一的(即:保证不覆盖 ...

  7. git checkout -b 报错

    有时候在git中checkout -b 出现如下报错 $ git checkout -b test --track origin/master fatal: Cannot update paths a ...

  8. ITOO右击菜单实现

    ITOO做了持续了这么长时间,client使用MVC+EF+EasyUI框架,服务端在三层基础上增加WCF服务,后来增加容器,AOP(还没怎么接触),封装了在我们刚開始看来神奇的底层方法,克服了非常多 ...

  9. Cannot find the class file for javax.servlet.ServletContext.

    当eclipse中新导入的Java Project的时候.往往会碰到各种各样的问题,以下是个典型的问题: Cannot find the class file for javax.servlet.Se ...

  10. 8.解决IntelliJ Idea 集成TortoiseSVN 时找不到svn.exe

    转自:https://blog.csdn.net/beibeijia125/article/details/70183533?utm_source=blogxgwz9 首先我们可以在http://su ...