Angularjs使用ng-repeat中$even和$odd屬性的注意事項(xiàng)

更新時(shí)間：2016年12月31日 13:18:24 作者：冰果在線

無(wú)可否認(rèn)angularjs的崛起成為前端很大的福利，最近接到項(xiàng)目，框架便選中了angularjs。angularjs最吸引人的地方就是數(shù)據(jù)的雙向綁定和指令了，這篇文章主要介紹了Angularjs中使用ng-repeat的$even和$odd屬性的注意事項(xiàng),需要的朋友可以參考下

前言

JavaScript中數(shù)組的索引是從0開始的，因此我們?cè)偃∑媾嫉臅r(shí)候需要用!$even和!$odd來(lái)將$even和$odd的布爾值反轉(zhuǎn)

下面給出一個(gè)實(shí)例：

使用$odd和$even來(lái)制作一個(gè)紅藍(lán)相間的列表

<!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用來(lái)遍歷一個(gè)集合或?yàn)榧现械拿總€(gè)元素生成一個(gè)模板實(shí)例。集合中的每個(gè)元素 都會(huì)被賦予自己的模板和作用域。同時(shí)每個(gè)模板實(shí)例的作用域中都會(huì)暴露一些特殊的屬性。 </h4>
 <ul>
 <li>$index：遍歷的進(jìn)度（0...length-1）。 </li>
 <li>$first：當(dāng)元素是遍歷的第一個(gè)時(shí)值為true。</li>
 <li>$middle：當(dāng)元素處于第一個(gè)和后元素之間時(shí)值為true。 </li>
 <li>$last：當(dāng)元素是遍歷的后一個(gè)時(shí)值為true。 </li>
 <li>$even：當(dāng)$index值是偶數(shù)時(shí)值為true。 </li>
 <li>$odd：當(dāng)$index值是奇數(shù)時(shí)值為true。 </li>
 </ul>
 下面的例子展示了如何用$odd和$even來(lái)制作一個(gè)紅藍(lán)相間的列表。記住，JavaScript中數(shù)組 的索引從0開始，因此我們用!$even和!$odd來(lái)將$even和$odd的布爾值反轉(zhuǎn)。 
 <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>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章:

相關(guān)文章

angularjs獲取到My97DatePicker選中的值方法
今天小編就為大家分享一篇angularjs獲取到My97DatePicker選中的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
初學(xué)者AngularJS的環(huán)境搭建過(guò)程
這篇文章主要介紹了初學(xué)者AngularJS的環(huán)境搭建過(guò)程,在文章給大家提到了Angular-cli的特性，大家一起看看吧
2017-10-10
Angular入口組件（entry component）與聲明式組件的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Angular入口組件（entry component）與聲明式組件的區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-04-04
angularjs表格分頁(yè)功能詳解
本文給大家分享的是個(gè)人在項(xiàng)目中使用angularjs實(shí)現(xiàn)表格分頁(yè)功能的思路和代碼，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2016-01-01
Angular4學(xué)習(xí)筆記之實(shí)現(xiàn)綁定和分包
本篇文章主要介紹了Angular4學(xué)習(xí)筆記之實(shí)現(xiàn)綁定和分包，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
這篇文章主要給大家介紹了關(guān)于Angular 4.x+Ionic3踩坑之Ionic 3.x界面?zhèn)髦档南嚓P(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-03-03