前言

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

转载于:https://www.cnblogs.com/CreateMyself/p/5566412.html

AngularJS之ng-class（十一）相关推荐

走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
基于angularJS和requireJS的前端架构
1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...
AngularJS基本知识点
AngularJS 是一个 MV* 框架,最适于开发客户端的单页面应用.它不是个功能库,而是用来开发动态网页的框架.它专注于扩展 HTML 的功能,提供动态数据绑定(data binding),而且它 ...
AngularJS与Django-模板标签冲突
本文翻译自:AngularJS with Django - Conflicting template tags I want to use AngularJS with Django however ...
AngularJS进阶学习
参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...
25个超有用的 AngularJS Web 开发工具
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,改善了JavaScript. 下面我要说的就是25个超有用的AngularJS工具, ...
学会使用AngularJS
这是用前端框架AngularJS构建一个简单应用的部分代码,首页配制一个路由.当然,AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.前端路由需要提前对指定的(ng-a ...
AngularJS 入门6-路由
AngularJS 入门6-路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 这个NG的路由模块可以实现带有多视图的单页面开发实例: //HTML ...
对vue与angular和react的对比
概念:vue是一个构建数据驱动的web界面的渐进式框架,它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件 vue对比angular 1.vue在设计之初参考了很多angularjs的 ...

AngularJS之ng-class（十一）

前言

ng-class使用字符串（一）

ng-class使用数组（二）

ng-class使用评估表达式（三）

ng-class使用三元表达式（四）

总结

AngularJS之ng-class（十一）相关推荐

最新文章

热门文章