zoukankan      html  css  js  c++  java
  • 使用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>
  • 相关阅读:
    漏洞扫描
    端口探测
    IP探测
    kali linux基础命令
    python学习07
    python学习06
    openoffice+jquery.media.js实现Linux与Windows中文档在线预览
    Oracle10g安装包
    MyEclipse2014安装包附注册破解包、eclipse安装包
    外层div自适应内层div高度
  • 原文地址:https://www.cnblogs.com/BGOnline/p/5959713.html
Copyright © 2011-2022 走看看