最近在学习angular框架,ng-class是angular框架的一个指令,这里是ng-class指令的官方解释:

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

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

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

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

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

在angular中有三种处理class的方式:
1:scope变量绑定。
2:字符串数组形式。
3:对象key/value处理。

例1:(scope变量绑定形式)

function test($scope){
$scope.test =“classname”;
} <div class=”{{test}}”></div>

这种方式不推荐使用。

例2:(字符串数组形式)

function Ctr($scope) {
$scope.isActive = true;
} <div ng-class="{true: 'active', false: 'inactive'}[isActive]">
</div>

这段代码的意思就是当isActive的值为True时,则动态绑定的class为active,为flase时,动态绑定的类为inactive,当需要绑定多个类名时可以用空格隔开。

例3:(对象key/value处理)

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

function Ctr($scope) { 

}

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

其实这和数组字符串方式类似,当isSelected为true时,动态绑定select类,当isCar为true时动态绑定car类。

ng-class的用法的更多相关文章

  1. ng 1.2 ng-bind-html 用法

    使用ng-bind-html渲染html字符串时需要在控制器外注册$sec 过滤器 //过滤器渲染html字符串 app.filter('to_trusted',['$sce',function($s ...

  2. 萌新笔记——vim命令“=”、“d”、“y”的用法(结合光标移动命令,一些场合会非常方便)

    vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...

  3. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  4. ng指令之 ng-class 篇

    1>定义和用法 ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类.ng-class 指令的值可以是字符串,对象,或一个数组. 如果是字符串,多个类名使用空格分隔. 如果 ...

  5. [Ng]Angular应用点概览

      1. 使用模块化写法. var app = angular.module('myApp', []); app.controller('TextController', function($scop ...

  6. (转载)OC学习篇之---协议的概念和用法

    在前一篇文章中我们介绍了OC中类的延展,这一篇文章我们在来看一下OC中协议的概念以及用法,协议也是OC中的一个重点,Foundation框架以及我们后面在写代码都会用到. OC中的协议就是相当于Jav ...

  7. sed命令用法详解

    sed命令用法 sed是一种流编辑器,它是文本处理中非常有用的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为『模式空间』(pattern space) ...

  8. AngularJS简单用法

    一.数据绑定 AngularJS的双向数据绑定,意味着你可以在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然.即:一方面可以做到model变化驱动了DOM中元素变化,另一 ...

  9. Android 自学之画廊视图(Gallery)功能和用法

    Gallery与之前讲的Spinner有共同的父类:AbsSpinner,表明Gallery和Spinner都是一个列表框.他们之间的区别在于Spinner显示的是一个垂直的列表框,而Gallery显 ...

  10. 观察者模式在ng(Angular)中的应用

    在这个前端框架满天飞的天下,angular MVVM 的模式确实火了一把,所以最近一直在学习ng,感悟颇多,填坑无数,今天终静下心来打算更新自己久未变动的博客,做一做总结. 1.在ng中的观察者模式: ...

随机推荐

  1. Mac的最小化和隐藏的区别

    Mac 中应用程序窗口的最小化和隐藏的快捷键: CMD + H 隐藏应用程序 CMD + M 最小化应用程序 重点在于两点的区别: 最小化会隐藏当前应用程序的窗口,不切换当前的应用程序:隐藏应用程序会 ...

  2. Whole life

    Whole life the wonder such you bring the beautyI can see but i keep deep inside on itOh life i feel ...

  3. 前端开发week1

    1.前端开发前期相关工具 photoshop:主要学习运用与前端相关工具,了解UI与前端的关联.    axure:原型设计,通过设计原型了解网页基本结构,结合ps对UI有更好的理解.    webs ...

  4. sql返回两个日期之间的日期_函数实现

    -- Description:返回两段日期之间的所有日期    <Description,,>-- ============================================ ...

  5. js中(function(){…})()立即执行函数写法理解

    文章摘自https://my.oschina.net/u/2331760/blog/468672?p={{currentPage+1}} 摘要: javascript和其他编程语言相比比较随意,所以j ...

  6. linux密码的更改

    找到UTF-8,在后面空格后输入init=/bin/sh  然后CHRL+X启动 进入到这个界面,输入mount -o remount,rw / 再输入touch / .autorelabel ,然后 ...

  7. java 文件压缩和解压(ZipInputStream, ZipOutputStream)

    最近在看java se 的IO 部分 , 看到 java 的文件的压缩和解压比较有意思,主要用到了两个IO流-ZipInputStream, ZipOutputStream,不仅可以对文件进行压缩,还 ...

  8. AudioUnit 用法

    1.描述音频单元 AudioComponentDescription desc; desc.componentType = kAudioUnitType_Output; desc.componentS ...

  9. css中clearfix清除浮动的用法及其原理示例介绍

    clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: b ...

  10. Uncaught ReferenceError: XXX is not defined

    Uncaught ReferenceError: XXX is not defined 这个问题困扰我很久,虽然找到了解决方法,但是还不是很明白. 如下所示:是报错的代码. 如果把它改成下面的形式就可 ...