標籤：
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中ngRepeat的$even與$odd屬性時的注意事項
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
