AngularJS基础 ng-class-odd 指令示例  更新时间:2016年08月01日 09:44:18   投稿:lqh   本文主要介绍AngularJS ng-class-odd 指令,这里对ng-class-odd基础知识做了详细整理,并有示例代码和效果图,学习AngularJS的同学可以参考下 AngularJS ng-class-odd 指令 AngularJS 实例 为表格的奇数行设置 class=”striped”: {{x.Name}} {{x.Country}} 运行结果: 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元素都是支持的。 语法 所有 HTML 元素都支持。 参数值 值 描述 expression 表达指定一个或多个 CSS 类。 以上就是对AngularJS资料的整理,有需要的朋友参考下。 您可能感兴趣的文章: 详解AngularJS ng-class样式切换 angularJs的ng-class切换class 详解angularJs中关于ng-class的三种使用方式说明 AngularJS使用ng-class动态增减class样式的方法示例 浅谈AngularJS中ng-class的使用方法 AngularJS中关于ng-class指令的几种实现方式详解 AngularJS 基础ng-class-even指令用法 AngularJS入门教程之ng-class 指令用法 AngularJS中ng-class用法实例分析 AngularJS ng-class-odd 指令 相关文章 Angularjs使用过滤器完成排序功能 这篇文章主要为大家详细介绍了Angularjs使用过滤器完成排序功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-09-09 Angular中$compile源码分析 本文给大家分享的是通过angular中的$compile源码进行分析,从而更好的理解angular的使用,非常的不错,希望大家能够喜欢。 2016-01-01 详解JavaScript的AngularJS框架中的表达式与指令 这篇文章主要介绍了JavaScript的AngularJS框架中的表达式与指令,文中罗列了几个常用的指令属性加以说明,需要的朋友可以参考下 2016-03-03 Angular6 写一个简单的Select组件示例 这篇文章主要介绍了Angular6写一个简单的Select组件示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-08-08 AngularJS HTML DOM详解及示例代码 本文主要介绍AngularJS HTML DOM基础知识,这里整理了相关资料和示例代码进行详解,有需要的小伙伴可以参考下 2016-08-08 Angular5给组件本身的标签添加样式class的方法 本篇文章主要介绍了Angular 5 给组件本身的标签添加样式class的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-04-04 深入理解Angularjs向指令传递数据双向绑定机制 这篇文章主要深入的给大家介绍了Angularjs向指令传递数据,双向绑定机制的相关资料,需要的朋友可以参考下 2016-12-12 对angular 监控数据模型变化的事件方法$watch详解 今天小编就为大家分享一篇对angular 监控数据模型变化的事件方法$watch详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 Angular下H5上传图片的方法(可多张上传) 本文给大家分享在使用angular上传图片的功能,在开发过程中遇到很多问题,最终都解决了,今天小编给大家介绍下Angular下H5上传图片的方法(可多张上传),非常不错,需要的朋友参考下 2017-01-01 Angular.js跨controller实现参数传递的两种方法 这篇文章主要给大家介绍了关于Angular.js跨controller实现参数传递的两种方法,文中给出了详细的介绍和示例代码,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。 2017-02-02 最新评论

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资料的整理,有需要的朋友参考下。

您可能感兴趣的文章:

  • 详解AngularJS ng-class样式切换
  • angularJs的ng-class切换class
  • 详解angularJs中关于ng-class的三种使用方式说明
  • AngularJS使用ng-class动态增减class样式的方法示例
  • 浅谈AngularJS中ng-class的使用方法
  • AngularJS中关于ng-class指令的几种实现方式详解
  • AngularJS 基础ng-class-even指令用法
  • AngularJS入门教程之ng-class 指令用法
  • AngularJS中ng-class用法实例分析
张贴在3