AngularJS之ng-class（十一）

前言

本節我們來講講指令中的ng-class，通過添加ng-class來生成對應的樣式，有時候得根據不同的條件來選擇對應的樣式，本節我們來看看ng-class的靈活性用法。

ng-class使用字符串（一）

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

<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使用數組（二）

ng-class作為數組來選擇樣式通過[]來實現，如下：

<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使用評估表達式（三）

何為評估表達式即當我們定義的變量為true時則顯示對應的樣式，否則不予應用。我們來看看代碼：

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

評估表達式必須要用{}來表示，相對於來說此種用法是ng-class幾種方式中比較高級的用法。我們看下實際效果：

同樣我們再舉出一個例子，在顯示列表中，給不同行着色。

<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使用三元表達式（四）

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

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

效果：

總結

 本節我們講了講ng-class指令，通過給出幾種不同的使用方式來說明其靈活性，來告知我們在不同情況下選擇適合你的場景。