<!doctype html>

<html ng-app="firstApp">

<head>

    <meta charset="utf-8">

    <script src="angular-1.3.0.js"></script>

</head>

<body>

<style>

    .it{color:#ff7300;margin:10px;}

    .curr{background: #006600;}

    .fs18{font-size:30px;}

    .pd20{padding:20px;background:#26a3db;}

</style>

<pre>

   1.字符串数组形式。

    < div ng-class="{true: 'active', false: 'inactive'}[isActive]">< /div>

   相当于对这个求值：({true: 'active', false: 'inactive'})[false]    ({true: 'active', false: 'inactive'})[true]

    即 var ct={true: 'active', false: 'inactive'};

    ct[true]或ct[false]得到值为'active'或 'inactive'

   2.scope变量绑定，（不推荐使用）

        $scope.test =“classname”;

        < div class=”{{test}}”>< /div>

   3. 象key/value方式，处理class混合

    < div ng-class="{'selected': isSelected, 'car': isCar}">< /div>

</pre>

<div ng-controller="cartController">

    <div class="it {{test}}">scope变量绑定</div>

    <div class="it" ng-click="selM()" ng-class="{true: 'curr', false: ''}[isActive]">字符串数组形式，单击</div>

    <div class="it" ng-class="{'fs18': isFs, 'pd20':isPd }"  ng-click="selM3()">对象key/value方式，处理class混合..将应用it fs18 pd20 。其中it是默认的</div>

</div>

<script>

    var app=angular.module('firstApp',[]);//app模块名

    app.controller('cartController',function($scope){

        $scope.test='curr';//直接方式。

        $scope.isActive=false;

        $scope.selM=function(){

            $scope.isActive=true;

            console.log('当前选中否',$scope.isActive)

        }

        //第3种方式

        $scope.isFs=false;

        $scope.isPd=false;

        $scope.selM3=function(){

            $scope.isFs=true;

            $scope.isPd=true;

        }

    });

</script>

</body>

</html>

angularJS ngClass如何使用的更多相关文章

  1. AngularJS ng-class用法

    mark from https://my.oschina.net/gejiawen0913/blog/188547 ng-class是AngularJS预设的一个指令,用于动态自定义dom元素的css ...

  2. [Angularjs]ng-class,ng-class-even,ng-class-odd

    写在前面 最近在通过angularjs将数据绑定到前端,其中也涉及到很多新的东西,一些效果还是很有必要实现的.在使用中发现ng-class,ng-class-even.ng-class-odd的使用, ...

  3. AngularJs ng-class 使用

    今天在做项目的时候要对表格内的部分的最大最小值高亮 解决方案 1. 引用 ng-class 2. 引用原型求最大最小值 实例 AngularJs HTML 代码 <table class=&qu ...

  4. AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle

    这几个都关于样式及类名修改的,所以先把样式代码贴上吧. .red{color:red} .blue{color:blue} 写案例用到的样式就这么简单的两个,下面进入正题. ngClass ngCla ...

  5. angularjs ng-class 两种用法

    ng-class="{'active':current.actived_tree==item}" ng-class="{true:'label-danger white- ...

  6. angularjs ng-class

    ng-class指令可以设置一个键值对,用于决定是否添加一个特定的类名,键为class名,值为bool类型表示是否添加该类名 <style> .red { color: red; } .g ...

  7. [Angularjs]系列——学习与实践

    写在前面 这个系列是来这家公司到现在,边用边学,以及在工作中遇到的问题进行的总结.深入的东西不多,大多是实际开发中用到的东西. 这里做一个目录,方便查看. 系列文章 [Angularjs]ng-sel ...

  8. [Angularjs]单页应用之分页

    写在前面 在项目中,用到单页应用的分页,当时想到使用滚动加载的方案,可是几次尝试都没配置成功,闲着无聊就弄了一个demo. 系列文章 [Angularjs]ng-select和ng-options [ ...

  9. [Angularjs]国际化

    写在前面 在项目中,有用到国际化,跟着就了解了下使用angularjs实现的国际化,这里做一下记录. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]n ...

随机推荐

  1. Linux下PHP+MYSQL+APACHE配置方法

    apache: http://www.apache.org  mysql: http://www.mysql.com  php: http://www.php.net/downloads.php  g ...

  2. 简单介绍MR21和MR22

    MR21和MR22都可以用来调整价格,MR21是更改的单个物料的价格,MR22更改的是库存总价值,所以MR21可以更改移动平均价(V)或标准价(S)的物料价格.MR22只能更改移动平均价(V)的物料价 ...

  3. git管理测试生产环境代码

    利用post-update实现简单钩子 #!/bin/bash cd /www/test || exit #进入指定的目录 unset GIT_DIR #清楚环境变量 git checkout mas ...

  4. 一个 div 实现扇形图（锥形渐变）

    需要引用的js文件<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min ...

  5. 第一章.C语言简介

    C语言第一章 C语言简介   目录 一.C语言介绍 二.C语言特点 三.Hello World 四.转义符 五.占位符 六.俄罗斯方块游戏 七.文件下载 一.C语言介绍 C是一种通用的编程语言,广泛用 ...

  6. 空格哥的第一篇Blog

    首先十分感谢博客园在这里给我的平台,我在这里学习到了很多东西,响应的,我也想要在这里记录下自己的心路历程!在学习的过程中,希望博客园一直陪伴我,小弟在这里不胜感激!这是小弟的第一篇博客,很多东西都不是 ...

  7. 自动拒绝恶意IP远程登录Linux服务器脚本

    当我们已经配置了iptables防火墙,我们允许22端口对外网所有人访问,当然这也是为了方便,我们在任何地方都连接上,没有做VPN,也没有做ssh密钥验证,但是我们的密码设置得非常复杂,大小写.特殊符 ...

  8. C#中浮点数依IEEE-754标准转二进制串 (MODBUS 浮点数转换)

    因工作需要,把再串口通信中浮点数与字节流的数据转换函数放在这,转发的,谢谢原作者. 今天花了一天的时间搜罗资料,为了解决一个串口编程的进制转化问题.因为串口传送的浮点数据格式与IEEE-754标准(3 ...

  9. CentOS 7 程序自启动的问题

    Mysql具体的安装方法见http://www.cnblogs.com/yoyotl/p/5752437.html 但是关于自启动部分需要多一些说明. 一.问题现象: 系统重启后,发现mysqld服务 ...

  10. SQL知识整理二：锁、游标、索引

    锁 锁的模式 锁模式 描述 共享(S) 用于不更改或不更新数据(只读操作),如SELECT语句 更新(U) 用于可更新的资源中.防止当多个会话在读取.锁定以及随后可能进行的资源更新时发生常见形式的死锁 ...