AngularJS ng-class-odd 指令

  • 定义和用法

    ng-class-odd 指令动态地将一个或多个 CSS 类绑定到 HTML 元素,但仅对HTML元素的每隔两个(奇数)外观生效。
    ng-class-odd 指令仅在与 ng-repeat 指令一起使用时才有效。
    ng-class-odd 指令非常适合于样式列表中或表中行的样式,但是它可以在任何 HTML 元素上使用。
  • 语法

    <element ng-class-odd="expression"></element>
    
    所有HTML元素都支持。
  • 参数

    参数 必需的 描述
    expression 该表达式返回一个或多个类名。
  • 示例

    下例演示了为每个其他(奇数)个表行设置class="striped":
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    <style>
      .striped {
        color:white;
        background-color:#f0f;
      }
    </style>
    </head>
    <body ng-app="myApp">
        <table ng-controller="myCtrl">
          <tr ng-repeat="x in records" ng-class-odd="'striped'">
            <td>{{x.Name}}</td>
            <td>{{x.Country}}</td>  
          </tr>
        </table>
        <script>
          var app = angular.module("myApp", []);
          app.controller("myCtrl", function($scope) {
            $scope.records = [
              {
                "Name" : "小明明",
                "Country" : "北京"
              },
              {
                "Name" : "Berglunds",
                "Country" : "巴黎"
              },
              {
                "Name" : "小猫",
                "Country" : "成都"
              },
              {
                "Name" : "Handel",
                "Country" : "西班牙"
              }
            ]
          });
        </script>
    </body>
    </html>
    
    尝试一下