AngularJS ng-class-odd 指令

实例

为其他（奇数）表格行设置 class="striped":

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<style>
.striped {
    color:white;
    background-color:black;
}
</style>
<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" : "Alfreds Futterkiste",
      "Country" : "Germany"
    },
    {
      "Name" : "Berglunds snabbkp",
      "Country" : "Sweden"
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico"
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria"
    }
  ]
});
</script>
</body>
</html>

运行一下

定义与用法

ng-class-odd 指令将一个或多个 CSS 类动态绑定到一个 HTML 元素，但仅对 HTML 元素的每一个（奇数）外观生效。

ng-class-odd 指令仅在与 ng-repeat 指令一起使用时有效。

ng-class-odd 指令非常适合设置列表中的项目或表中的行的样式，但它可以用于任何 HTML 元素。

语法

<element ng-class-odd="expression"></element>

由所有 HTML 元素支持。

参数值

值	描述
expression	返回一个或多个样式类名的表达式

AngularJS ng-class-odd 指令

实例

定义与用法

语法

参数值

分类导航