热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

angularjs中ngclass常用写法,三元表达式、评估表达式与对象写法

 壹❀引ng-class可以说在angularjs样式开发中使用频率特别高了,这不我想利用ng-class的三元运算符的写法来定义一个样式,结果怎么都想不起来正确写法,恼羞成怒

 壹 ❀ 引

ng-class可以说在angularjs样式开发中使用频率特别高了,这不我想利用ng-class的三元运算符的写法来定义一个样式,结果怎么都想不起来正确写法,恼羞成怒还是整理一遍吧,那么本文开始:

 贰 ❀ 常用写法

1.ng-class使用变量

即ng-class的值是一个变量,当我们改变变量值时,得到的class名也会对应改变;例如下面的例子中文本样式的class名由select的值决定,选择不同选项得到不同的效果,例如:

select name="" id="" ng-model="vm.style"
option value="blue" 蓝底白字 /option
option value="red" 红底白字 /option
/select
span ng- 听风是风 /span

如果我们有多个变量作为ng-class的值,可以通过数组的方式包裹住这些变量名,像这样:

span ng- 听风是风 /span

 2.ng-class评估表达式

这种非常非常常见,我们已经确定了ng-class的名字,但是用一个变量决定这个class是否生效,例如:

input type="checkbox" ng-model="vm.status"
span ng- 听风是风 /span

如果我们需要控制多个class名,请使用逗号进行分割

span ng- 听风是风 /span

注意:class名有加引号和不加引号两种写法,博客中例子都没加引号,但推荐都加引号;原因是如果需要控制的class名为多个单词,不加引号以 - 拼接会报错,小驼峰命名不会,但如果加引号,使用 - 拼接可小驼峰都没问题。

正确写法:

span ng- 听风是风 /span

推荐阅读
author-avatar
手机用户2502925983
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有