Angularjs中的ng-class
在angular中为我们提供了3种方案处理class:
1:scope变量绑定。(不推荐使用)
2:字符串数组形式。
3:对象key/value处理。
我们继续其他两种解决方案:
1字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如:

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active{background: green}
.active{background: red}
</style>
</head>
<body>
<div ng-controller="Aaa">
<div ng-class="{ true: 'active', false: 'inactive'}[isActive]">
11111
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function Aaa($scope){
$scope.isActive=true;
}
</script>
</body>
</html>

其结果是2中组合,isActive表达式为true,则 active,负责inactive。
扩展:

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active{background: green}
.inactive{background: red}
</style>
</head>
<body>
<div ng-controller="Aaa">
<div ng-class="{ true: 'active', false: 'inactive'}[isActive]" ng-click="change()">
11111
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function Aaa($scope){
$scope.isActive=true;
$scope.change=function(){
$scope.isActive=!$scope.isActive
}
}
</script>
</body>
</html>

这种方法做到了class之间简单的切换
2对象key/value处理主要针对复杂的class混合,其形如:

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.selected{background: green}
.car{border:1px solid red}
</style>
</head>
<body>
<div ng-controller="Aaa">
<div ng-class="{'selected' : isSelected, 'car' : isCar}">
11111
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function Aaa($scope){
$scope.isSelected=true;
$scope.isCar=true;
}
</script>
</body>
</html>

当 isSelected = true 则增加selected class,
当isCar=true,则增加car class,
Angularjs中的ng-class的更多相关文章
- angular 中怎么获取路径上的参数 参考:https://docs.angularjs.org/api/ng/service/$location
参考: https://docs.angularjs.org/api/ng/service/$location
- AngularJS中的模板安全与作用域绑定
欢迎大家指导与讨论 : ) 一.前言 摘要:指令compile.$sce.作用域绑定.$compileProvider和其他资源安全设置.本文是笔者在学习时整理的笔记,由于技术还不够高,如果本章中有错 ...
- AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...
- AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4
1.切换工作目录 git checkout step- #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-mo ...
- AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
- angularJs中筛选功能-angular.filter-1
技术分享:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filter-learn-1/ 以下介绍为自己在使用ang ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- (九)通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系
$injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
随机推荐
- KVM guest caching modes
kvm中host和guest各自维护自己的page caches,使得内存中有两份缓存数据.host的缓存为page cache可以理解为读缓存,guest的缓存为disk write cache,可 ...
- ssh 依赖关系
安装ssh时: sudo apt-get install openssh-server 出现错误: 下列软件包有未满足的依赖关系: openssh-server : 依赖: openssh-clien ...
- window.open打开新页面居中
var iHeight = 500;//新打开页面的高 var iWidth = 800;//新打开页面的宽 var iTop = (window.screen.height-30-iHeight)/ ...
- hdu1026
#include <stdio.h> #include <string.h> #include <queue> using namespace std; struc ...
- noip2015Day2T2-子串
题目描述 Description 有两个仅包含小写英文字母的字符串A和B.现在要从字符串A中取出k个互不重叠的非空子串,然后把这k个子串按照其在字符串A中出现的顺序依次连接起来得到一个新的字符串,请问 ...
- 九章lintcode作业题
1 - 从strStr谈面试技巧与代码风格 必做题: 13.字符串查找 要求:如题 思路:(自写AC)双重循环,内循环读完则成功 还可以用Rabin,KMP算法等 public int strStr( ...
- smarty基础与实例
什么是smarty? Smarty是一个使用PHP写出来的模板引擎,是业界最著名的PHP模板引擎之一.Smarty分离了逻辑代码和外在的内容,提供一种易于管理和使用的方法,用来将原本与HTML代码混杂 ...
- iOS开发传感器相关
手机里面内置了很多的传感器,例如:光传感器,湿度传感器,温度传感器,距离传感器等等 //开发传感器相关的东西必须使用真机 //在螺旋仪和加速计所有两种方式push和pull的方式,push的方式是时时 ...
- iOS开发播放文本
iOS7以后AVSpeechSynthesizer苹果开放了这个类 它可以将文本转化成声音并播放: 下面的是我的封装使用起来特别简单: // // TTSSpeak.h // SayLoveY ...
- aps.net 页面事件执行顺序