脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS ng-class-odd 指令

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":

<!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-route实现基本的路由功能实例详解

    AngularJS通过ng-route实现基本的路由功能实例详解

    这篇文章主要介绍了AngularJS通过ng-route实现基本的路由功能,结合实例形式详细分析了AngularJS使用ng-route实现路由功能的操作步骤与相关实现技巧,需要的朋友可以参考下
    2016-12-12
  • AngularJS使用ng-options指令实现下拉框

    AngularJS使用ng-options指令实现下拉框

    这篇文章主要介绍了AngularJS使用ng-options指令实现下拉框效果，ng-option指令使用也很简单，下文具体给大家说明，对angularjs 下拉框知识感兴趣的朋友一起看下吧
    2016-08-08
  • AngularJS中的过滤器使用详解

    AngularJS中的过滤器使用详解

    这篇文章主要介绍了AngularJS中的过滤器使用详解,过滤器是AngularJS中处理文本的一个非常有用的功能,需要的朋友可以参考下
    2015-06-06
  • Angularjs编写KindEditor,UEidtor,jQuery指令

    Angularjs编写KindEditor,UEidtor,jQuery指令

    使用过 AngularJS 的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能，并且AngularJS 是目前唯一提供Web应用可复用能力的框架。
    2015-01-01
  • Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

    Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

    ng-template 是用来定义模板的，当使用ng-template定义好一个模板之后，可以用ng-container和templateOutlet指令来进行使用。这篇文章给大家介绍了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友参考下吧
    2018-08-08
  • 浅谈Angular的12个经典问题

    浅谈Angular的12个经典问题

    Angular作为目前最为流行的前端框架，受到了前端开发者的普遍欢迎。不论是初学Angular的新手，还是有一定Angular开发经验的开发者，了解本文中的12个经典面试问题，都将会是一个深入了解和学习Angular2的知识概念的绝佳途径。
    2021-05-05
  • AngularJS 表达式详解及实例代码

    AngularJS 表达式详解及实例代码

    这篇文章主要介绍了AngularJS 表达式，这里整理了详细的资料，有需要的小伙伴可以参考下
    2016-09-09
  • 教你用AngularJS框架一行JS代码实现控件验证效果

    教你用AngularJS框架一行JS代码实现控件验证效果

    简单来说Angular.js是google开发者设计和开发的一套前端开发框架，帮助你简化前端开发的负担。到底能简化到什么程度呢，今天我们来看下，一行代码实现控件验证效果，有木有吓尿？
    2014-06-06
  • AngularJS 实现JavaScript 动画效果详解

    AngularJS 实现JavaScript 动画效果详解

    本文主要介绍AngularJS 实现 JavaScript 动画的资料，这里整理了详细的资料和简单示例代码，有兴趣的小伙伴可以参考下
    2016-09-09
  • AngularJS自定义指令实现面包屑功能完整实例

    AngularJS自定义指令实现面包屑功能完整实例

    这篇文章主要介绍了AngularJS自定义指令实现面包屑功能,结合完整实例形式分析了AngularJS自定义指令的定义、调用及面包屑功能的具体实现技巧,需要的朋友可以参考下
    2017-05-05

最新评论