AngularJS基础 ng-class-odd 指令示例

前端技术 2023/09/05 JavaScript

AngularJS ng-class-odd 指令

AngularJS 实例

为表格的奇数行设置 class=\"striped\":

<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<script src=\"http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js\"></script>
<style>
.striped {
  color:white;
  background-color:black;
}
</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\" : \"Alfreds Futterkiste\",
   \"Country\" : \"Germany\"
  },
  {
   \"Name\" : \"Berglunds snabbk\",
   \"Country\" : \"Sweden\"
  },
  {
   \"Name\" : \"Centro comercial Moctezuma\",
   \"Country\" : \"Mexico\"
  },
  {
   \"Name\" : \"Ernst Handel\",
   \"Country\" : \"Austria\"
  }
 ]
});
</script>

</body>
</html>

运行结果：

Alfreds Futterkiste Germany
Berglunds snabbk Sweden
Centro comercial Moctezuma Mexico
Ernst Handel Austria

定义和用法

ng-class-odd 指令用于为 HTML 元素动态的绑定一个或多个 CSS 类，但只作用于奇数行。

ng-class-odd 指令需要与 ng-repeat 指令搭配使用。

ng-class-odd 指令建议用在表格的样式渲染中，但是所有HTML元素都是支持的。

语法

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

所有 HTML 元素都支持。

参数值

值 描述
expression 表达指定一个或多个 CSS 类。

以上就是对AngularJS资料的整理，有需要的朋友参考下。

本文地址：https://www.stayed.cn/item/13622

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案