• 10.ng-class-even与ng-class-odd


    转自:https://www.cnblogs.com/best/tag/Angular/

    AngularJS模板使你可以把该作用域内的数据直接绑定到所显示的HTML元素

    ng-class-even与ng-class类似,ng-repeat中偶数时应用

    ng-class-odd与ng-class类似,ng-repeat中奇数时应用

    <p ng-repeat="a in animals" ng-class-odd="'odd'" ng-class-even="'even'">
       {{a.name}}
    </p>

    示例代码:

     1 <!DOCTYPE html>
     2 <!--指定angular管理的范围-->
     3 <html ng-app="app01">
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>指令</title>
     7         <style>
     8             .bg1{
     9                 background: lightcoral;
    10                 color:white;
    11             }
    12             .bg2{
    13                 background: lightpink;
    14                 color: white;
    15             }
    16         </style>
    17     </head>
    18     <body>
    19         <!--指定控制器的作用范围-->
    20         <form ng-controller="Controller1" name="form1">
    21             <ul>
    22                 <li ng-repeat="u in users" ng-class-even="'bg1'" ng-class-odd="'bg2'">
    23                     {{u.name}}
    24                 </li>
    25             </ul>
    26         </form>
    27         <!--引入angularjs框架-->
    28         <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
    29         <script type="text/javascript">
    30             //定义模块,指定依赖项为空
    31             var app01 = angular.module("app01", []);
    32             //定义控制器,指定控制器的名称,$scope是全局对象
    33             app01.controller("Controller1", function($scope) {
    34                 $scope.users = [{
    35                     id: 1,
    36                     name: "tom",
    37                     sex: "男",
    38                     age: 19
    39                 }, {
    40                     id: 2,
    41                     name: "rose",
    42                     sex: "女",
    43                     age: 18
    44                 }, {
    45                     id: 7,
    46                     name: "jack",
    47                     sex: "男",
    48                     age: 16
    49                 }, {
    50                     id: 9,
    51                     name: "lucy",
    52                     sex: "女",
    53                     age: 20
    54                 }, {
    55                     id: 15,
    56                     name: "mark",
    57                     sex: "男",
    58                     age: 89
    59                 }];
    60             });
    61         </script>
    62     </body>
    63 </html>

    运行结果:

  • 相关阅读:
    Python匹马行天下之_循环
    Hello world!
    Python匹马天下行之python基本语法
    Python匹马行天下之python之父
    Python匹马行天下之面向对象
    Python匹马行天下之运算符
    Python匹马行天下之初识python!
    跨域问题学习记录 CORS解决的2种方法
    Linux系统运维成长记
    关于倒计时new Date().getTime()出现NaN
  • 原文地址:https://www.cnblogs.com/sharpest/p/8126809.html
Copyright © 2020-2023  润新知