angularjs之ng-class指令详解

angularjs中通常使用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使用数组

<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使用评估表达式

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

同样我们再举出一个例子，在显示列表中，给不同行着色。

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

原文：http://www.cnblogs.com/CreateMyself/p/5566412.html