在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. Linux镜像资源收集

    1.企业 搜狐开源镜像站: http://mirrors.sohu.com/ 网易开源镜像站: http://mirrors.163.com/ 阿里开源镜像站: http://mirrors.aliy ...

  2. C#读取Excel的其中一种方式OleDb读取（100万条）--快速大量插入SQL中

    主要运用表类型 Create table BulkTestTable( Id nvarchar(), UserName nvarchar(), Pwd nvarchar() ) Go CREATE T ...

  3. 转：Android应用性能测试

    Android用户也许会经常碰到以下的问题: 1)应用后台开着,手机很快没电了——应用耗电大 2)首次/非首次启动应用,进入应用特别慢——应用启动慢 3)应用使用过程中,越来越卡——CPU能力不足/内 ...

  4. lt&gt&eq

    lt:less than,小于 gt:greater than,大于 eq:equal,等于 le:less equal,小于等于 ge:greater than,大于等于

  5. transform translate transition 的区别

    transform是变形,下面有translate transform: rotate旋转/scale缩放/skew扭曲/translate移动/matrix矩阵变形transform连写:rotat ...

  6. 《JS权威指南学习总结--8.3 函数的实参和形参》

    内容要点: 一.可选形参 当调用函数的时候传入的实参比函数声明时指定的形参个数要少,剩下的形参都将设置为undefined值. 例如: //将对象o中可枚举的属性名追加至数组 //如果省略a,则创建一 ...

  7. js返回上一页并刷新代码整理

    一:JS 重载页面,本地刷新,返回上一页 复制代码 代码如下: <a href="javascript:history.go(-1)">返回上一页</a> ...

  8. 【Python@Thread】queue模块-生产者消费者问题

    python通过queue模块来提供线程间的通信机制,从而可以让线程分项数据. 个人感觉queue就是管程的概念 一个生产者消费者问题 from random import randint from ...

  9. 图的存储结构：邻接矩阵（邻接表）&链式前向星

    [概念]疏松图&稠密图: 疏松图指,点连接的边不多的图,反之(点连接的边多)则为稠密图. Tips:邻接矩阵与邻接表相比,疏松图多用邻接表,稠密图多用邻接矩阵. 邻接矩阵: 开一个二维数组gr ...

  10. JavaEE 配置文件 应用首选项存储

    JavaEE 配置文件 应用首选项存储 @author ixenos 什么是首选项? 首选项Preferences 指配置信息 首选项存储就是指对配置信息的存储   有什么方式存储? 有两种,一种存于 ...