快捷導(dǎo)航

AngularJS基礎(chǔ) ng-class-odd 指令示例

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

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

AngularJS ng-class-odd 指令

AngularJS 實(shí)例

為表格的奇數(shù)行設(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>

運(yùn)行結(jié)果：

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

定義和用法

ng-class-odd 指令用于為 HTML 元素動(dòng)態(tài)的綁定一個(gè)或多個(gè) CSS 類，但只作用于奇數(shù)行。

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

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

語(yǔ)法

所有 HTML 元素都支持。

參數(shù)值

值	描述
expression	表達(dá)指定一個(gè)或多個(gè) CSS 類。

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

您可能感興趣的文章:

相關(guān)文章

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