JavaScript中数组的索引是从0开始的，因此我们再取奇偶的时候需要用!$even和!$odd来将$even和$odd的布尔值反转

下面给出一个实例：

使用$odd和$even来制作一个红蓝相间的列表

<!DOCTYPE html>

<html lang="zh-CN" ng-app="app">

<head>

    <meta charset="utf-8">

    <title>ng-repeat的用法</title>

    <link rel="stylesheet" href="../bootstrap.min.css">

    <style>

        .odd {

            background-color: blue;

        }

        .even {

            background-color: red;

        }

    </style>

</head>

<body>

    <h4>ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素 都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。 </h4>

    <ul>

        <li>$index：遍历的进度（0...length-1）。 </li>

        <li>$first：当元素是遍历的第一个时值为true。</li>

        <li>$middle：当元素处于第一个和后元素之间时值为true。 </li>

        <li>$last：当元素是遍历的后一个时值为true。 </li>

        <li>$even：当$index值是偶数时值为true。 </li>

        <li>$odd：当$index值是奇数时值为true。 </li>

    </ul>

    下面的例子展示了如何用$odd和$even来制作一个红蓝相间的列表。记住，JavaScript中数组 的索引从0开始，因此我们用!$even和!$odd来将$even和$odd的布尔值反转。

    <ul ng-controller="PeopleController">

        <li ng-repeat="person in people" style="color: #fff;" ng-class="{even: !$even, odd: !$odd}">

            {{ person.name }} 住在 {{ person.city }} {{$index}}

        </li>

    </ul>

    <script src="../angular.min.js"></script>

    <script>

        angular.module('app', [])

        .controller('PeopleController', ['$scope', function($scope) {

            $scope.people = [

                {name: '张三', city: '广东'},

                {name: '李四', city: '江西'},

                {name: '王五', city: '东北'}

            ]

        }])

    </script>

</body>

</html>

使用angularjs中ng-repeat的$even与$odd属性时的注意事项的更多相关文章

  1. angularjs中$watch监听model（对象属性、对象）变化

    昨天看了一下教学视频,学到了有关$watch的用法,想到最近做的一个页面中有个select下拉选项(select中的值变化了,则后面input中的值也跟着相应的变化),不知是否可以使用$watch来代 ...

  2. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  3. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  4. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  5. (九)通过几段代码，理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

    $injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...

  6. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  7. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  8. angularJS中$apply()方法详解

    这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下   对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...

  9. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

随机推荐

  1. Linux定时任务crontab命令使用详解

    1.crontab功能介绍: crontab的功能是在一定的时间间隔内定时执行一些命令. 2.crontab参数详解: 1 crontab -u //设定某个用户的cron服务,一般root用户在执行 ...

  2. UNIX时间戳及日期的转换与计算

    UNIX时间戳是保存日期和时间的一种紧凑简洁的方法,是大多数UNIX系统中保存当前日期和时间的一种方法,也是在大多数计算机语言中表示日期和时间的一种标准格式.以32位整数表示格林威治标准时间,例如,使 ...

  3. table 西边框样式

    table        {            border-collapse: collapse;            border: none;            width: 200p ...

  4. Delphi XE5 附破解补丁

    Embarcadero RAD Studio XE5 Version 19.0.13476.4176: http://altd.embarcadero.com/download/radstudio/x ...

  5. 不在界面上用控件 动态创建idhttp,IdAntiFreeze来用

    不在界面上用控件 动态创建idhttp,IdAntiFreeze来用 var IdHTTP: Tidhttp; IdAntiFreeze: TidAntiFreeze; begin IdAntiFre ...

  6. Dropbox可伸缩性设计最佳实践分享

    http://www.infoq.com/cn/news/2012/11/dropbox-scale-bestpractice Dropbox的运维工程师Rajiv,跟大家分享了可伸缩性设计的最佳实践 ...

  7. myEclipse8.* 手动安装ADT插件[转]

    Myeclipse8.6手动添加插件: 自动在线安装完ADT插件会导致myeclipse8.6中无法创建web项目以及其他项.解决方法是手动安装步骤如下: 首先安装好 MyEclipse 8.6. 1 ...

  8. Matlab 矩阵运算

    1.Syms 和sym的区别: syms是定义多个符号是符号变量的意思 sym只能定义一个符号变量,但可以具体到这个符号变量的内容 例:syms f z; %定义下x和y f=sym('a+b+c') ...

  9. sqoop组件运行出错问题解决--com.mysql.jdbc.Driver

    sqoop list-tables --connect jdbc:mysql://192.168.11.94:3306/huochetoudalian --username xxx -password ...

  10. 华为u8800+ root 还是不能删除自带软件

    下载个RE文件管理器 进入RE文件管理器后把上面的只读改成读写(ROOT过的点一下上面的只读就可以了) 再进入cust文件夹然后f---/cn/app 在这个文件夹里长按你要删除的定制软件 出来有个删 ...