在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. 第一次使用cnblogs

    第一次使用!!!!!留名纪念下!!!!!!!!!!!

  2. Effective JavaScript ：第一章

    第一章 一.严格模式与非严格模式 1.在程序中启用严格模式的方式是在程序的最开始增加一个特定的字符串字面量: ‘use strict’ 同样可以在函数体的开始处加入这句指令以启用该函数的严格模式. f ...

  3. 判断一个数是否为2的n次幂

    参考:http://bbs.csdn.net/topics/370058619 如题,如何判断一个整数是否是2的N次方,我能想到的方法有两个 1.一直除2,看最后是否等于1.(最笨的方法) 2.转换成 ...

  4. [转]整理jquery使用好习惯

    1.选择器Selector的使用 1)使用id定位性能最好   1.$("#id") 2)使用标签名定位,性能其次   1.$("p"),$("div ...

  5. Multidimensional Arrays

    Overview An array having more than two dimensions is called a multidimensional array in the MATLAB® ...

  6. Arch安装fcitx输入法

    安装fcitx,安装gtk.qt模块. [root@ARCH ~]# pacman -S fcitx-im :: There are 4 members in group fcitx-im: :: R ...

  7. Chapter 16_2 继承

    类也是对象,所有它们也可以从其他类获得方法.这就是“继承”,可以在Lua中表示: Account = { balance = } function Account:new(o) o = o or {} ...

  8. 【Linux】zookeeper构造伪集群

    1.在一台机器装安装3个zk server,构建伪集群模式安装步骤如下:1.下载zookeeper,下载地址:http://mirror.bit.edu.cn/apache/zookeeper/zoo ...

  9. python3 随机数

    random库 random.random()返回n,则 0 <= n < 1的小数. random.uniform(a,b)    返回n ,则 a <= n <= b的浮点 ...

  10. C - 小Y上学记——认识新同学

    C - 小Y上学记——认识新同学 Time Limit: 4000/2000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others) ...