浅谈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 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
Angular8基础应用之表单及其验证
Aug 11 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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
提取HTML标签
2006/10/09 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php牛逼的面试题分享
2013/01/18 PHP
php 地区分类排序算法
2013/07/01 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
js使用心得分享
2015/01/13 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
网络方面基础面试题
2012/11/16 面试题
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
给物业的表扬信
2014/01/21 职场文书
升国旗仪式主持词
2014/03/19 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
县级文明单位申报材料
2014/05/23 职场文书
婚宴父亲致辞
2015/07/27 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
python playwrigh框架入门安装使用
2022/07/23 Python