【转】ng-class的用法
原文出处:https://segmentfault.com/a/11...
在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子。
而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性
这里有三种方法:
第一种:通过数据的双向绑定(不推荐)
第二种:通过对象数组
第三种:通过key/value
下面简单说下这三种:
第一种:通过数据的双向绑定
实现方式:
function changeClass(){
$scope.className = "change2";
}
<div class="{{className}}"></div>
网上各种不推荐,说实话,既然angularJS双向数据绑定这么吊,为什么不能通过这个来改变呢!查了下原由:“在controller涉及了classname在我看来是乎总是那么诡异,我希望的是controller是一个干净的纯javascript意义的object”,当然并没有明文固定不能够这么使用的,而且反而我觉得这样非常的方便,让html中元素想怎么变就怎么变!同理中的img元素中的src就不可以通过别的来改变,但是通过这种方式就是可以的!
当然,这种方式也的确给人的感觉怪怪的,个人认为:可以不得已而为之~
第二种:通过字符串数组的形式来改变
实现方式:
function changeClass(){
$scope.className = true/false;
}
<div ng-class="{true:‘zhende‘,false:‘jiade‘}[className]"></div>
实现很简单,就是当className为真的时候class为zhende,相反则为jiade。
但是有一点不好的只能够让一个元素拥有两种状态,虽然这么说!基本也是满足所需了,我一般都用这个。简单、直观!
!!对于第二种方式我曾经有疑惑:这到底是什么用法?https://segmentfault.com/q/10...
**这并非NG的用法,而是Javascript的技巧。
{true: 'adopt', false: 'reject'}[item.approve]
其中,你把{true: 'adopt', false: 'reject'}当做某个变量a,你就可以改写成:
a[item.approve]
如果item.approve值为true,则上面为a[true],也就是'adopt'
反之,则上面为a[false],也就是'reject'。
当然可以使用最常规的三目运算符item.approve ? 'adopt' : 'reject'。**
第三种:通过key/value的方式
实现方式:
function changeClass(){
$scope.lala = true;
}
<div ng-class="{’selectClass‘:select,‘choiceClass‘:choice,‘haha‘:lala}"></div>
当lala为true的时候,class则为haha,个人认为这个是比较推荐的,可以弥补第二种方式的点点遗憾~
所以基本上,angularJS中ng-class的实现就这三种方式~
【转】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中的观察者模式: ...
随机推荐
- VS 返回值被忽略的解决方法
•问题 用 Visual Studio 编写 C++ 代码的时候,一旦用到 scanf , freopen 等函数的时候,编译器总会不合时宜的给你提示 "返回值被忽略",那么该如何 ...
- PyTorch深度学习实践-Overview
Overview 1.PyTorch简介 PyTorch是一个基于Torch的Python开源机器学习库,用于自然语言处理等应用程序.它主要由Facebookd的人工智能小组开发,不仅能够 实现强 ...
- Scrapy(六):Spider
总结自:Spiders - Scrapy 2.5.0 documentation Spider 1.综述 ①在回调函数Parse及其他自写的回调函数中,必须返回Item对象.Request对象.或前两 ...
- C语言刷数组题记录
讲解:https://mp.weixin.qq.com/s/weyitJcVHBgFtSc19cbPdw 二分法: 704. 二分查找 int search(int* nums, int numsSi ...
- pyqt(三)
六.按钮控件 QPushButton 常见的按钮实现类包括:QPushButton.QRadioButton和QCheckBox QPushButton是最普通的按钮控件,可以响应一些用户的事件 fr ...
- jq计算总时长
1: <style> .item { width: 500px; height: 50px; margin: 0 auto; text-align: center; font-size: ...
- laravel html转pdf
这两天项目中需要将HTML页面转换为PDF文件方便打印,我在网上搜了很多资料.先后尝试了laravel-dompdf和laravel-snappy两种扩展包,个人感觉laravel-snappy比较好 ...
- Python基础之hello world!
仪式感很重要嘛: 精通各个语言的hello world! Python3 版本的 print('Hello world')
- ASP.NET Core 6框架揭秘实例演示[24]:中间件的多种定义方式
ASP.NET Core的请求处理管道由一个服务器和一组中间件组成,位于 "龙头" 的服务器负责请求的监听.接收.分发和最终的响应,针对请求的处理由后续的中间件来完成.中间件最终体 ...
- 《前端运维》一、Linux基础--05Shell运算符
今天我们来学习下Shell运算符,Shell跟其他的编程语言一样,也支持多种运算符,包括: 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 那下面,我们就一一来学习一下这些运算符. ...