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

更新時間：2016年08月01日 09:44:18 投稿：lqh

本文主要介紹AngularJS ng-class-odd 指令,這里對ng-class-odd基礎知識做了詳細整理,并有示例代碼和效果圖,學習AngularJS的同學可以參考下

AngularJS ng-class-odd 指令

AngularJS 實例

為表格的奇數(shù)行設置 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 元素動態(tài)的綁定一個或多個 CSS 類，但只作用于奇數(shù)行。

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

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

語法

所有 HTML 元素都支持。

參數(shù)值

值	描述
expression	表達指定一個或多個 CSS 類。

以上就是對AngularJS資料的整理，有需要的朋友參考下。

您可能感興趣的文章:

AngularJS通過ng-route實現(xiàn)基本的路由功能實例詳解
這篇文章主要介紹了AngularJS通過ng-route實現(xiàn)基本的路由功能,結合實例形式詳細分析了AngularJS使用ng-route實現(xiàn)路由功能的操作步驟與相關實現(xiàn)技巧,需要的朋友可以參考下
2016-12-12
AngularJS使用ng-options指令實現(xiàn)下拉框
這篇文章主要介紹了AngularJS使用ng-options指令實現(xiàn)下拉框效果，ng-option指令使用也很簡單，下文具體給大家說明，對angularjs 下拉框知識感興趣的朋友一起看下吧
2016-08-08
AngularJS中的過濾器使用詳解
這篇文章主要介紹了AngularJS中的過濾器使用詳解,過濾器是AngularJS中處理文本的一個非常有用的功能,需要的朋友可以參考下
2015-06-06
Angularjs編寫KindEditor,UEidtor,jQuery指令
使用過 AngularJS 的朋友應該最感興趣的是它的指令?，F(xiàn)今市場上的前端框架也只有AngularJS 擁有自定義指令的功能，并且AngularJS 是目前唯一提供Web應用可復用能力的框架。
2015-01-01
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用來定義模板的，當使用ng-template定義好一個模板之后，可以用ng-container和templateOutlet指令來進行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友參考下吧
2018-08-08
淺談Angular的12個經典問題
Angular作為目前最為流行的前端框架，受到了前端開發(fā)者的普遍歡迎。不論是初學Angular的新手，還是有一定Angular開發(fā)經驗的開發(fā)者，了解本文中的12個經典面試問題，都將會是一個深入了解和學習Angular2的知識概念的絕佳途徑。
2021-05-05
AngularJS 表達式詳解及實例代碼
這篇文章主要介紹了AngularJS 表達式，這里整理了詳細的資料，有需要的小伙伴可以參考下
2016-09-09
教你用AngularJS框架一行JS代碼實現(xiàn)控件驗證效果
簡單來說Angular.js是google開發(fā)者設計和開發(fā)的一套前端開發(fā)框架，幫助你簡化前端開發(fā)的負擔。到底能簡化到什么程度呢，今天我們來看下，一行代碼實現(xiàn)控件驗證效果，有木有嚇尿？
2014-06-06
AngularJS 實現(xiàn)JavaScript 動畫效果詳解
本文主要介紹AngularJS 實現(xiàn) JavaScript 動畫的資料，這里整理了詳細的資料和簡單示例代碼，有興趣的小伙伴可以參考下
2016-09-09
AngularJS自定義指令實現(xiàn)面包屑功能完整實例
這篇文章主要介紹了AngularJS自定義指令實現(xiàn)面包屑功能,結合完整實例形式分析了AngularJS自定義指令的定義、調用及面包屑功能的具體實現(xiàn)技巧,需要的朋友可以參考下
2017-05-05