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指令，通过给出几种不同的使用方式来说明其灵活性，来告知我们在不同情况下选择适合你的场景。

 

---

为了方便大家在移动端也能看到我分享的博文，现已注册个人公众号，扫描上方左边二维码即可，欢迎大家关注，有时间会及时分享相关技术博文。

感谢花时间阅读此篇文章,如果您觉得这篇文章你学到了东西也是为了犒劳下博主的码字不易不妨打赏一下吧，让楼主能喝上一杯咖啡，在此谢过了！
如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！
本文版权归作者和博客园共有，来源网址：http://www.cnblogs.com/CreateMyself)/欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。