使用angularjs中ng-repeat的$even與$odd屬性時的注意事項


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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM