编程 Javascript

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

Posted in Javascript onAugust 01, 2016

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元素都是支持的。

语法

所有 HTML 元素都支持。

参数值

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

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

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

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript之cookie技术详解

Nov 18 Javascript

js中less常用的方法小结

Aug 09 Javascript

jQuery选择器之属性过滤选择器详解

Sep 28 jQuery

移动端效果之IndexList详解

Oct 20 Javascript

VUE2实现事件驱动弹窗示例

Oct 21 Javascript

JS中精巧的自动柯里化实现方法

Dec 12 Javascript

解决angular2 获取到的数据无法实时更新的问题

Aug 31 Javascript

JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析

Feb 12 Javascript

javascript实现评分功能

Jun 24 Javascript

vue内置组件keep-alive事件动态缓存实例

Oct 30 Javascript

详解vue修改elementUI的分页组件视图没更新问题

Nov 13 Javascript

vue elementUI表格控制对应列

Apr 13 Vue.js

js添加千分位的实现代码(超简单)

Aug 01 #Javascript

AngularJs定制样式插入到ueditor中的问题小结

Aug 01 #Javascript

jQuery的ajax和遍历数组json实例代码

Aug 01 #Javascript

JS遍历页面所有对象属性及实现方法

Aug 01 #Javascript

AngularJS 基础ng-class-even指令用法

Aug 01 #Javascript

jQuery EasyUI API 中文帮助文档和扩展实例

Aug 01 #Javascript

AngularJS入门教程之ng-class 指令用法

Aug 01 #Javascript