在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. CSS中RGBA的兼容方法以及透明度计算方法

    CSS对IE使用背景透明 实现 rgba 效果 height:35px; background: -webkit-gradient(linear,left top,left bottom,from(r ...

  2. HDU 5831 Rikka with Parenthesis II

    如果左括号数量和右括号数量不等,输出No 进行一次匹配,看匹配完之后栈中还有多少元素: 如果n=2,并且栈中无元素,说明是()的情况,输出No 如果n=2,并且栈中有元素,说明是)(的情况,输出Yes ...

  3. LINQ里的“equals”和“==”的区别

    对于值类型,如果对象的值相等,则相等运算符 (==) 返回 true,否则返回 false.对于string 以外的引用类型,如果两个对象引用同一个对象,则 == 返回 true.对于 string ...

  4. 【LeetCode】419. Battleships in a Board

    Given an 2D board, count how many different battleships are in it. The battleships are represented w ...

  5. mybatis 查询语句(按条件查询)

    <select id="getAllDitch" parameterType="xxx.xx.entity.CheckDitch" resultType= ...

  6. ggplot2 geom相关设置—分布图

    分布在R中应该算是个比较重要的内容,而通过画图来展示数据的分布,可以更直观的让我们了解数据的分布情况 直方图 geom_histogram(mapping = NULL, data = NULL, s ...

  7. luci小记

    LuCI使用controller目录下的lua脚本中的index函数来构造了一个dispatch树.cgi环境变量PATH_INFO会被用在dispatch树种,例如 cgi-bin/luci/foo ...

  8. informix建临时表索引

    对于特殊字段,比如外键,主键,在不知道外键主键名的情况下,需要如下操作select constrname from sysconstraints where constrtype='R' and ta ...

  9. F - 小晴天老师系列——苹果大丰收

    F - 小晴天老师系列——苹果大丰收 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Other ...

  10. CSV文件解析工具

    package com.common.util; import java.io.BufferedReader; import java.io.FileInputStream; import java. ...