浅谈AngularJS中ng-class的使用方法


Posted in Javascript onNovember 11, 2016

有三种方法:

1、通过$scope绑定(不推荐)
2、通过对象数组绑定
3、通过key/value键值对绑定

实现方法:

1、通过$scope绑定(不推荐):

function ctrl($scope) {  
  $scope.className = "selected"; 
}
<div class="{{className}}"></div>

2、通过对象数组绑定:

function ctrl($scope) {  
  $scope.isSelected = true; 
}
<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>

当isSelected为true时,增加selected样式;当isSelected为false时,增加unselected样式。

3、通过key/value键值对绑定:

function ctrl($scope) {  
  $scope.isA = true; 
  $scope.isB = false; 
  $scope.isC = false; 
}
<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>

当isA为true时,增加A样式;当isB为true时,增加B样式;当isC为true时,增加C样式。

<ion-list> 
  <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}"> 
    {{project.title}} 
  </ion-item> 
</ion-list>

根据projects循环创建ion-item,当activeProject为当前循环到的project时,增加active样式。

几点说明:

1、不推荐第一种方法,因为controller $scope应该只有数据和行为

2、ng-class是增加相关样式,可以和class同时使用

以上就是小编为大家带来的浅谈AngularJS中ng-class的使用方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
js返回顶部实例分享
Dec 21 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
js模块加载方式浅析
Aug 12 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
JS中数组重排序方法
Nov 11 #Javascript
js编写的treeview使用方法
Nov 11 #Javascript
Vue.js教程之计算属性
Nov 11 #Javascript
JS控制TreeView的结点选择
Nov 11 #Javascript
node+express制作爬虫教程
Nov 11 #Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 #Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 #Javascript
You might like
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
Python基于locals返回作用域字典
2020/10/17 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
商场经理竞聘演讲稿
2014/01/01 职场文书
求职毕业生自荐书
2014/02/08 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
聘用意向书范本
2014/04/01 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
MySQL数据库查询之多表查询总结
2022/08/05 MySQL