在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. Devstack single node Installation on VM

    Last three days, I want to install devstack on my virtual machine on Vmware Workstation.The VM'syste ...

  2. Ubuntu下 hadoop2.5.1 （伪分布模式） 配置工作

    一:安装JDK hadoop 是以java语言写的,因此需要在本地计算机上预先安装JDK,安装JDK的方法这里不再详述. 二:创建hadoop用户 为hadoop创建一个专门的用户,将所有的hadoo ...

  3. hdu1011

    /*比较苦逼的树形DP,慢慢来吧!不着急*/#include <iostream>#include <vector>using namespace std;const int ...

  4. CENTOS7小注意

    由于第一次使用 Linux CENTOS ,所以安装了图形界面,但是在终端执行yum 安装的时候,总是提示 Existing lock /var/run/yum.pid: another copy i ...

  5. EasyuiAPI：布局

    一.Panel(面板) 1.通过标签创建: <div id="p" class="easyui-panel" title="My Panel&q ...

  6. Hadoop故障排除：jps 报process information unavailable

    4883 -- process information unavailable 解决办法: 进入tmp目录, cd /tmp 删除该目录下 名称为hsperfdata_{username}的文件夹 然 ...

  7. 数学之欧拉函数 &几道poj欧拉题

    欧拉函数总结+证明 欧拉函数总结2 POJ 1284 原根 #include<iostream> #include<cstdio> #include<cstring> ...

  8. Java 反射 分析类和对象

    Java 反射 分析类和对象 @author ixenos 摘要:优化程序启动策略.在运行时使用反射分析类的结构和对象 优化程序启动策略 在启动时,包含main方法的类被加载.它会加载所有它需要的类. ...

  9. WCF、Web API、WCF REST、Web Service的区别

    Difference between WCF and Web API and WCF REST and Web Service   The .Net framework has a number of ...

  10. STL学习：STL库vector、string、set、map用法

    本文仅介绍了如何使用它们常用的方法. vector 1.可随机访问,可在尾部插入元素:2.内存自动管理:3.头文件#include <vector> 1.创建vector对象 一维: (1 ...