1，定义和用法

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

2.主要用法有三种

第一种双向数据绑定格式的不推荐所以就不列举了

第二种：通过字符串数组的形式来改变（这种是元素只拥有两种状态）

<style>
        .red{
            background: red;
        }
        .green{
            background: green;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <div ng-class="{true:'red',false:'green'}[flag]">我会变颜色</div>
    <button type="button" ng-click="flag=!flag">点我</button>
</body>
第三种：通过key/value的方式（这种元素可以有多种状态）
<style>
        .red{
            background: red;
        }
        .green{
            background: green;
        }
    </style>
    <script>
        var m1=angular.module("myApp",[]);
        m1.controller("Aaa",function($scope){
            $scope.ws=true;
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <div ng-class="{'red':ws,'green':dq}">ewsdfasdfasdf</div>
</body>

2.其他用法

1.与ng-repeat一起使用：

<style>
        .red{
            background: red;
        }
        .green{
            background: green;
        }
    </style>
    <script>
        var m1=angular.module('myApp',[]);
        m1.controller('Aaa',function($scope){
            $scope.names=["ws","dq","cy"];
        });
    </script>
</head>
<body ng-app="myApp">
   <ul ng-controller="Aaa">
       <li ng-repeat="name in names" ng-class="{red:$even,green:$odd}">{{name}}</li>
   </ul>
</body>
3.ng-style的使用
<div ng-style ="{color:'red'}"></div>

angular学习之关于ng-class详解的更多相关文章

  1. Java学习-007-Log4J 日志记录配置文件详解及实例源代码

    此文主要讲述在初学 Java 时,常用的 Log4J 日志记录配置文件详解及实例源代码整理.希望能对初学 Java 编程的亲们有所帮助.若有不足之处,敬请大神指正,不胜感激!源代码测试通过日期为:20 ...

  2. Python学习一：序列基础详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7858473.html 邮箱:moyi@moyib ...

  3. Python学习二：词典基础详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...

  4. IP2——IP地址和子网划分学习笔记之《子网掩码详解》

    2018-05-04 16:21:21   在学习掌握了前面的<进制计数><IP地址详解>这两部分知识后,要学习子网划分,首先就要必须知道子网掩码,只有掌握了子网掩码这部分内容 ...

  5. Linux学习之文件特殊权限详解(SetUID、SetGID、Sticky BIT)(十一)

    Linux学习之文件特殊权限详解(SetUID.SetGID.Sticky BIT) 目录 SetUID SetGID Sticky BIT SetUID SetUID简介 只有可以执行的二进制程序和 ...

  6. Flume NG 配置详解（转）

    原文链接:[转]Flume NG 配置详解 (说明,名词对应解释 源-Source,接收器-Sink,通道-Channel) 配置 设置代理 Flume代理配置存储在本地配置文件.这是一个文本文件格式 ...

  7. 重新学习MySQL数据库7：详解MyIsam与InnoDB引擎的锁实现

    重新学习Mysql数据库7:详解MyIsam与InnoDB引擎的锁实现 说到锁机制之前,先来看看Mysql的存储引擎,毕竟不同的引擎的锁机制也随着不同. 三类常见引擎: MyIsam :不支持事务,不 ...

  8. 《从0到1学习Flink》—— Flink 配置文件详解

    前面文章我们已经知道 Flink 是什么东西了,安装好 Flink 后,我们再来看下安装路径下的配置文件吧. 安装目录下主要有 flink-conf.yaml 配置.日志的配置文件.zk 配置.Fli ...

  9. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  10. [转载]JavaEE学习篇之——JQuery技术详解

    原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...

随机推荐

  1. 【java学习笔记】字符串和Date的转换

    String dateVal = "1992-12-06 18:34:23"; SimpleDateFormat sdf = new SimpleDateFormat(" ...

  2. 解决mysql数据库插入中文字段时出现？？？ 的问题

    1.检查并修改mysql的my.ini的配置文件   default-character-set=utf8 2.建立数据库是要指定字符集   create database mydb default ...

  3. WordPress忘记登录密码

    后台的登录密码使用的是md5加密的,有时候会忘记登录密码,那么可以修改数据库,把密码改为你知道的字符串的md5加密值 如 hello对应的md5加密值为:5d41402abc4b2a76b9719d9 ...

  4. 【原】使用Xfermode正确的绘制出遮罩效果

    以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...

  5. Spring boot mybatis项目启动后一直刷日志的bug修复……

    最近接手一个项目,使用的框架是springboot+mybatis: 其中持久层是使用mybatis集成的,sql是配置在mapper.xml文件中: 然后呢,有时候做新功能的时候,往xml文件中增加 ...

  6. tftp 限制ip 限制ip段 或者多个ip段访问

    1 限制单个ip访问 tftp 配置tftp信息 vi /etc/xinetd.d/tftp 在 service tftp配置信息中添加  only_form =ip 重启 service xinet ...

  7. vue.js在windows本地下搭建环境和创建项目

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  8. [原创]java WEB学习笔记108：Spring学习---基于配置文件的形式实现AOP

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  9. JavaScriptSerializer使用条件

    JavaScriptSerializer使用条件:需先引用组件:System.Web.Extensions 类全称:System.Web.Script.Serialization.JavaScript ...

  10. Java类WebServer及中间件拿webshell方法总结

    0.序 原文名称:Tomcat.Weblogic.JBoss.GlassFish.Resin.Websphere弱口令及拿webshell方法总结 原文from:http://www.hack80.c ...