前言

本節(jié)我們來(lái)講講指令中的ng-class，通過(guò)添加ng-class來(lái)生成對(duì)應(yīng)的樣式，有時(shí)候得根據(jù)不同的條件來(lái)選擇對(duì)應(yīng)的樣式，本節(jié)我們來(lái)看看ng-class的靈活性用法。

ng-class使用字符串（一）

想必這種用法是最簡(jiǎn)單的，我們稍作演示下。

<div class="well"><div class="form-group"><input type="text" placeholder="input your class type" ng-model="textType" class="form-control" /></div><div ng-class="textType" style="font-size: x-large;">xpy0928 from cnblogs</div> </div>

效果：

?

ng-class使用數(shù)組（二）

ng-class作為數(shù)組來(lái)選擇樣式通過(guò)[]來(lái)實(shí)現(xiàn)，如下：

<div class="well"><input type="text" ng-model="styleOne" class="form-control"><input type="text" ng-model="styleTwo" class="form-control"><div ng-class="[styleOne, styleTwo]" style="font-size: x-large;">xpy0928 from cnblogs</div> </div>

效果：

?

ng-class使用評(píng)估表達(dá)式（三）

何為評(píng)估表達(dá)式即當(dāng)我們定義的變量為true時(shí)則顯示對(duì)應(yīng)的樣式，否則不予應(yīng)用。我們來(lái)看看代碼：

<div class="well"><input type="checkbox" ng-model="danger"> Good luck to u?<input type="checkbox" ng-model="wrong"> u are wrong?<br /><span ng-class="{ 'btn-danger': danger, 'btn-success': wrong }" style="font-size: x-large;">xpy0928 from cnblogs </span> </div>

評(píng)估表達(dá)式必須要用{}來(lái)表示，相對(duì)于來(lái)說(shuō)此種用法是ng-class幾種方式中比較高級(jí)的用法。我們看下實(shí)際效果：

同樣我們?cè)倥e出一個(gè)例子，在顯示列表中，給不同行著色。

<div class="well"><ul><li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li></ul> </div>

效果：

ng-class使用三元表達(dá)式（四）

三元運(yùn)算符不用再做介紹了吧，我們直接上代碼，演示效果：

<div class="well"><ul><li ng-class="$even ? 'btn-info' : 'btn-danger'" ng-repeat="item in items">{{ item.name }}</li></ul> </div>

效果：

總結(jié)

?本節(jié)我們講了講ng-class指令，通過(guò)給出幾種不同的使用方式來(lái)說(shuō)明其靈活性，來(lái)告知我們?cè)诓煌闆r下選擇適合你的場(chǎng)景。

?

轉(zhuǎn)載于:https://www.cnblogs.com/CreateMyself/p/5566412.html

總結(jié)

以上是生活随笔為你收集整理的AngularJS之ng-class（十一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。