在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的更多相关文章

  1. angular 中怎么获取路径上的参数 参考：https://docs.angularjs.org/api/ng/service/$location

    参考: https://docs.angularjs.org/api/ng/service/$location

  2. AngularJS中的模板安全与作用域绑定

    欢迎大家指导与讨论 : ) 一.前言 摘要:指令compile.$sce.作用域绑定.$compileProvider和其他资源安全设置.本文是笔者在学习时整理的笔记,由于技术还不够高,如果本章中有错 ...

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

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

  4. AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

    1.切换工作目录 git checkout step- #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-mo ...

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

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

  6. 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 ...

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

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

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

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

  9. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  10. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

随机推荐

  1. github import repository创建github仓库

    现在,假设我们从零开发,那么最好的方式是先创建远程库,然后,从远程库克隆. 首先,登陆GitHub,创建一个新的仓库,名字叫blog: 1.先创建一个项目仓库 2. 我们勾选Initialize th ...

  2. Python简记

    1.字符换行: print('ab \ncd \nef')

  3. LYF电子书制作工具(CHM格式)

    可以制作CHM电子书 可以制作电子相册 下载地址:http://files.cnblogs.com/files/blogLYF/LYF电子书制作安装包.zip http://files.cnblogs ...

  4. ZZNU 1993: cots' friends

    题目描述 cot 最近非常喜欢数字, 喜欢到了什么程度呢, 已经走火入魔了.... cot把每个朋友编上一个序号,然后遇到谁就叫"XX号",对此,他的朋友们一致认为cot" ...

  5. bigdecimal使用

    float和double类型 一般用于科学计算,用于金融的都用bigdecimal类型.在项目中浮点型数据没有指定 默认是double类型.bigdecimal的构造参数有浮点型和String类型.但 ...

  6. OGG强制停止进程

    1.异常现象[oracle@localhost ~]$ ggsci Oracle GoldenGate Command Interpreter for OracleVersion 11.1.1.0.0 ...

  7. linux安装gcc-c++

    首先查看系统是否安装: gcc -v    g++ -v    c++ -v 没有安装则执行一键安装命令:#yum install gcc-c++ 如果直接执行:#yum install c++是安装 ...

  8. BOS物流管理系统-第八天

    BOS物流管理系统-第八天-权限系统设计-Shiro 回顾: 两大块业务:基础设置模块,业务派单模块. 两天:权限控制. 拦截器大的范围的.纯登录级别(认证级别)大颗粒的权限控制的一种技术. Shir ...

  9. CSU 1333 Funny Car Racing

    最短路问题稍微复杂了一点,松弛的时候多判断一些条件就可以了.第一次用SPFA写最短路. #include<cstdio> #include<cmath> #include< ...

  10. 关于cocos2dx的C++调用创建项目

    我使用的是cocos2dx-2.1.4版本+cygwin,其实主要是为了配合公司项目,所以用了低版本的cocos2dx 假设已经配置环境成功: 按照对应的要求输入包名,项目名,以及TargetId,就 ...