上一节:
下一节:

  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>
    尝试一下

  • 相关页面

返回 AngularJS 参考手册
上一节:
下一节: