转自：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. [POJ2823][洛谷P1886]滑动窗口 Sliding Window

    题目大意:有一列数,和一个窗口,一次能框连续的s个数,初始时窗口在左端,不断往右移动,移到最右端为止,求每次被框住的s个数中的最小数和最大数. 解题思路:这道题是一道区间查询问题,可以用线段树做.每个 ...

  2. 搭建rsync实时同步

    1.本实验基于centos6.5服务器做的 cat cat /etc/redhat-release 2.在配置环境之前需要先将服务器自带的rsync卸除 yum -y remove rsync* 3. ...

  3. 紫书 习题 11-8 UVa 1663 （最大流求二分图最大基数匹配）

    很奇怪, 看到网上用的都是匈牙利算法求最大基数匹配 紫书上压根没讲这个算法, 而是用最大流求的. 难道是因为第一个人用匈牙利算法然后其他所有的博客都是看这个博客的吗? 很有可能-- 回归正题. 题目中 ...

  4. 从头认识Spring-1.16 SpEl对集合的操作（1）-建立集合以及訪问集合的元素，以&lt;util:list/&gt;为例

    这一章节我们来讨论一下怎样建立集合以及訪问集合的元素? 1.建立集合? (1)domain 蛋糕类: package com.raylee.my_new_spring.my_new_spring.ch ...

  5. Crytek的幕后花絮

    无论是哪种公司规模和状态.Xsolla都能够为其提供定制化的服务.我们提供定制化的技术集成,而不是提供一系列的解决方式.由于我们致力于满足每个合作伙伴的需求.整套的解决方式还存在着一系列的潜在隐患,我 ...

  6. What are the differences between WebAPI and WebAPI 2

    http://stackoverflow.com/questions/21298961/what-are-the-differences-between-webapi-and-webapi-2 Maj ...

  7. 使用isolation forest进行dns网络流量异常检测

    代码如下,测试发现,是否对输入数据进行归一化/标准化对于结果没有影响: import numpy as np from sklearn.ensemble import IsolationForest ...

  8. BZOJ 球形空间产生器 解题报告(高斯消元)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1013 1013: [JSOI2008]球形空间产生器sphere 有一个球形空间产生器能 ...

  9. php函数： call_user_func()和call_user_func_array() 使用详解

    call_user_func 该函数允许直接调用自己写的函数,可以直接传入一些参数. 使用方法1:给自己写的函数传入参数,一个特别的调用函数的方法. <?php funciotn test1($ ...

  10. 添加本地 yum源

    添加本地 yum源 yum-updatesd.conf yum的主配置文件   [root@zhou ~]# cd /etc/yum.repos.d/ [root@zhou yum.repos.d]# ...