ng-class的用法
最近在学习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的用法的更多相关文章
- ng 1.2 ng-bind-html 用法
使用ng-bind-html渲染html字符串时需要在控制器外注册$sec 过滤器 //过滤器渲染html字符串 app.filter('to_trusted',['$sce',function($s ...
- 萌新笔记——vim命令“=”、“d”、“y”的用法(结合光标移动命令,一些场合会非常方便)
vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- ng指令之 ng-class 篇
1>定义和用法 ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类.ng-class 指令的值可以是字符串,对象,或一个数组. 如果是字符串,多个类名使用空格分隔. 如果 ...
- [Ng]Angular应用点概览
1. 使用模块化写法. var app = angular.module('myApp', []); app.controller('TextController', function($scop ...
- (转载)OC学习篇之---协议的概念和用法
在前一篇文章中我们介绍了OC中类的延展,这一篇文章我们在来看一下OC中协议的概念以及用法,协议也是OC中的一个重点,Foundation框架以及我们后面在写代码都会用到. OC中的协议就是相当于Jav ...
- sed命令用法详解
sed命令用法 sed是一种流编辑器,它是文本处理中非常有用的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为『模式空间』(pattern space) ...
- AngularJS简单用法
一.数据绑定 AngularJS的双向数据绑定,意味着你可以在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然.即:一方面可以做到model变化驱动了DOM中元素变化,另一 ...
- Android 自学之画廊视图(Gallery)功能和用法
Gallery与之前讲的Spinner有共同的父类:AbsSpinner,表明Gallery和Spinner都是一个列表框.他们之间的区别在于Spinner显示的是一个垂直的列表框,而Gallery显 ...
- 观察者模式在ng(Angular)中的应用
在这个前端框架满天飞的天下,angular MVVM 的模式确实火了一把,所以最近一直在学习ng,感悟颇多,填坑无数,今天终静下心来打算更新自己久未变动的博客,做一做总结. 1.在ng中的观察者模式: ...
随机推荐
- 将Jquery序列化后的表单值转换成Json
From: https://segmentfault.com/a/1190000000473625 小朋友有一个表单,他想以Json的方式获取到表单的内容.小朋友尝试了以下方式. 通过$(" ...
- 支付宝APP支付后台参数生成Java版(一)
一.支付参数组装: String[] parameters={ "service=\"mobile.securitypay.pay\"",//固定值 " ...
- Unity3d获取APK签名及公钥的方法
在Unity3d项目中获取APK包签名公钥的方法,核心思想就是通过JNI调用Android提供的方法.不过Unity3d提供了比JNI更上一层的类AndroidJavaObject以及继承它的Andr ...
- angular初步认识一
最近比较流行MVC前端框架开发,最近研究了一个框架AngularJS框架 不说那么多,先上例子,我是个代码控 <!DOCTYPE html> <html lang="en& ...
- android 初步了解应用Gson 解析Json数据
1,因为没有服务器返回数据,对于Tomcat又懒得去配,所以我直接把数据写死到app中 先写一个实体类,便于操作 /** * 实体类 */ public class Person { int id ; ...
- jacoco原理
Jacoco的原理 转自:kingzzm 的博客,感谢~ 覆盖率计数器 Jacoco使用一系列的不同的计数器来做覆盖率的度量计算.所有这些计数器都是从java的class文件中获取信息,这些class ...
- Android Activity中获取当前焦点的控件,自动化输入EditText
获取焦点的view对象 View view=getWindow().getDecorView().findFocus(); 如果是EditText if(view instanceof EditTex ...
- HBase的基本架构及其原理介绍
1.概述:最近,有一些工程师问我有关HBase的基本架构的问题,其实这个问题仅仅说架构是非常简单,但是需要理解.在这里,我觉得可以用HDFS的架构作为借鉴.(其实像Hadoop生态系统中的大部分组建的 ...
- iOS 上拉下拉刷新简单实现代码
一般说到上拉刷新下拉刷新,很多人可能想到的是一个第三方开源框架EGORefresh,下面说下,如何自己写代码实现. UITableView本身是一个UIScrollView,所以UITableView ...
- JS总结 节点
nodeName 获取节点名称 元素节点:返回标记名称 属性节点:返回属性名称 文本节点:返回文本#text nodeTyle 获取节点类型 元素节点:返回1 属性节点:返回2 文本节点:返回3 n ...