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>
  • 相关阅读:
    【转】【SEE】基于SSE指令集的程序设计简介
    【转】【Asp.Net】asp.net服务器控件创建
    ControlTemplate in WPF ——ScrollBar
    ControlTemplate in WPF —— Menu
    ControlTemplate in WPF —— Expander
    ControlTemplate in WPF —— TreeView
    ControlTemplate in WPF —— ListBox
    ControlTemplate in WPF —— ComboBox
    ControlTemplate in WPF —— TextBox
    ControlTemplate in WPF —— RadioButton
  • 原文地址:https://www.cnblogs.com/BGOnline/p/5959713.html
Copyright © 2011-2022 走看看