转自:https://blog.csdn.net/jumtre/article/details/50802136

其他博文ng-class使用方法:https://blog.csdn.net/sinat_36146776/article/details/78340922

有三种方法:

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

2、通过对象数组绑定

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

实现方法:

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

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

2、通过对象数组绑定:

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

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

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

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

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

  1. <ion-list>
  2. <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
  3. {{project.title}}
  4. </ion-item>
  5. </ion-list>
<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使用方法的更多相关文章

  1. AngularJS中控制器之间通信方法

    在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...

  2. AngularJS中页面传参方法

    1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...

  3. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  4. angularJS中$apply()方法详解

    这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下   对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...

  5. AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

    简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的 ...

  6. AngularJS中监视Scope变量以及外部调用Scope方法

    在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> & ...

  7. 深入了解angularjs中的$digest与$apply方法,从区别聊到使用优化

     壹 ❀ 引 如果有人问,在angularjs中修改模型数据为何视图会同步更新呢,我想大多数人一定会回答脏检查(Dirty Checking)相关概念.没错,在angularjs中作用域(scope) ...

  8. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  9. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  10. (九)通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

    $injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...

随机推荐

  1. BZOJ3155:Preprefix sum——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3155 最朴素的想法是两棵树状数组,一个记录前缀和,一个记录前缀前缀和,但是第二个我们非常不好修改 ...

  2. 【bzoj4804】欧拉心算 解题报告

    [bzoj4804]欧拉心算 Description 给出一个数字\(N\),计算 \[\sum_{i=1}^n\sum_{j=1}^n \varphi(\gcd(i,j))\] Input 第一行为 ...

  3. [CQOI2016] 手机号码 (数位dp)

    link $solution:$ $10^{10} \leq L \leq R < 10^{11}$这个数据范围很容易想到数位$dp$. 依照题意模拟即可. #include<iostre ...

  4. Python pytagcloud 中文分词 生成标签云 系列(一)

    转载地址:https://zhuanlan.zhihu.com/p/20432734工具 Python 2.7 (前几天试了试 Scrapy 所以用的 py2 .血泪的教训告诉我们能用 py3 千万别 ...

  5. mysql查改

    1 MySQL UNION 操作符语法格式: SELECT expression1, expression2, ... expression_n FROM tables [WHERE conditio ...

  6. python学习(20) 网络编程

    原文链接:http://www.limerence2017.com/2018/01/02/python20/ python 网络编程和基本的C语言编程一样,效率不是很高,如果为了封装通信库建议采用C/ ...

  7. Linux Wget 命令实例讲解

    Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到本地服务器.如果我们使用虚拟主机,处理这样的 ...

  8. navicat链接mysql

    navicat链接mysql

  9. 完美配置Python3.5+Anaconda+PyQt5,实现UI和其他模块的结合

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  10. python---基础知识回顾(六)网络编程

    python---基础知识回顾(十)进程和线程(进程) python---基础知识回顾(十)进程和线程(多线程) python---基础知识回顾(十)进程和线程(自定义线程池) 一:Socket (一 ...