Angular语法(三)——数据绑定
绑定类型
绑定类型可以按照数据流的方向分为三类:从源到视图,从视图到源,以及双向序列
示例
<!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Save</button>
绑定对象
Property binding
<img [src]="heroImageUrl">
<img bind-src="heroImageUrl">
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
不要忘记方括号
正确的写法
<app-hero-detail [hero]="currentHero"></app-hero-detail>
错误的写法
<!-- ERROR: HeroDetailComponent.hero expects a
Hero object, not the string "currentHero" -->
<app-hero-detail hero="currentHero"></app-hero-detail>
HeroDetail组件的hero属性需要一个Hero对象,这正是您在属性绑定中发送的内容:括号告诉Angular评估模板表达式。
如果省略方括号,Angular会将该字符串视为常量并使用该字符串初始化目标属性。
属性绑定还是插值?
下面写法等效
<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p> <p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
Attribute, class, and style bindings
Attribute binding
错误的写法
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
报错
Template parse errors:
Can't bind to 'colspan' since it isn't a known native property
正确的写法
<!-- expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
Class binding
不使用bind
<div class="bad curly special">Bad curly special</div>
使用bind
<!-- reset/override all class names with a binding -->
<div class="bad curly special"
[class]="badCurly">Bad curly</div>
Style binding
Style binding语法类似于Property binding。 代替括号内的元素属性,从前缀样式开始,后跟一个点(.)和一个CSS样式属性的名称:[style.style-property]
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
一些样式有一个单位扩展名。
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
Event binding
两种写法
<button (click)="onSave()">Save</button>
<button on-click="onSave()">On Save</button>
<input [value]="currentHero.name"
(input)="currentHero.name=$event.target.value" >
还可以自定义Event
Two-way binding ( [(...)] )
Angular为双向绑定提供了一种特殊的双向数据绑定语法,[(x)]。 [(x)]语法将属性绑定的括号[x]与事件绑定的括号(x)组合在一起。
[( )] = BANANA IN A BOX
香蕉在一个盒子里
在盒子中形象化一个香蕉,记住圆括号在括号内。
示例
<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
双向绑定语法实际上只是语法绑定和事件绑定的语法糖。
<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
Angular语法(三)——数据绑定的更多相关文章
- angular 语法的应用
angular.js 一个js框架 , 是三大主流框架之一:( vue react angular ): 原先的开发:前端和后台,利用 Ajax 进行交互, 但是框架却提出了一种开发模式:mvc 这 ...
- PHP语法(三):控制结构(For循环/If/Switch/While)
相关链接: PHP语法(一):基础和变量 PHP语法(二):数据类型.运算符和函数 PHP语法(三):控制结构(For循环/If/Switch/While) 本文我来总结几个PHP常用的控制结构,先来 ...
- Python 基础语法(三)
Python 基础语法(三) --------------------------------------------接 Python 基础语法(二)------------------------- ...
- Pocket英语语法---三、英语动词的特点是什么
Pocket英语语法---三.英语动词的特点是什么 一.总结 一句话总结:即表示时间(时态),又表示人数(单复数) 1.第十七讲,不定量表达法? 1.a few为肯定含义几个,few为否定含义没几个, ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- Angular JS - 3 - Angular JS 双向数据绑定
一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...
- Angular(三)
Angular开发者指南(三)数据绑定 数据绑定AngularJS应用程序中的数据绑定是模型和视图组件之间的数据的自动同步. AngularJS实现数据绑定的方式可以将模型视为应用程序中的单一来源 ...
- Angular解决双向数据绑定
<!DOCTYPE html> <html ng-app="myApp1"><body><div ng-controller=" ...
- ios -- 教你如何轻松学习Swift语法(三) 完结篇
前言:swift语法基础篇(二)来了,想学习swift的朋友可以拿去参考哦,有兴趣可以相互探讨,共同学习哦. 一.自动引用计数 1.自动引用计数工作机制 1.1 swift和o ...
随机推荐
- java异常中Exception捕获不到的异常
一 概念 众所周知java提供了丰富的异常类,这些异常类之间有严格的集成关系,分类为 父类Throwable Throwable的两个子类Error和Exception Exception的两个子类C ...
- Android 获取签名证书的具体信息(Eclipse和Android studio通用)
今天要用到签名证书的MD5,可是这个仅仅有在第一次生成的时候我看到了,这可怎么办呢,幸亏我们有google,我们执行以下的命令就OK了. keytool -list -v -keystore 签名证书 ...
- 创建ListView的基本步骤 分类: H1_ANDROID 2013-10-31 23:25 1276人阅读 评论(0) 收藏
参考<疯狂android讲义>第2.5节P94 1.创建一个或者多个ListView <LinearLayout xmlns:android="http://schemas ...
- sysbench压测Oracle
安装: yum -y install make m4 autoconf automake libtool pkgconfig libaio-devel rpm -Uvh http://dl.fedo ...
- Shuttle ESB(三)——架构模型介绍(2)
上一篇文章中,介绍了Shuttle ESB架构模型中的三个重要部分. 今天,我们继续介绍剩余的三个内容:模式和消息路由. 四.模式 Request/Response(请求/响应模式) 对基于Reque ...
- windows下python安装uwsgi
1.使用pip安装 pip install uwsgi 报错:os没有uname() 解决: 定位到uwsgiconfig.py文件中,首先import platform后,将os.unam()都改为 ...
- BAT实习内推笔试卷(第一场)——个人答案以及分析
第一题: 给定一个长度不小于2的数组arr. 写一个函数调整arr,使arr中要么全部的偶数位上都是偶数,要么全部的奇数位上都是奇数上. 要求:假设数组长度为N.时间复杂度请达到O(N),额外空间复杂 ...
- QQ欢乐斗地主心得体会 (三):高倍场攻略
上个月,也可能是上个月的上个月,我的欢乐豆兵积攒到了百万之众,突破了历史记录.最近2个月一直在高倍场混,想写点高倍场的心得体会.本篇的体会,与以前写的2篇斗地主心得体会,有点不同. 特别说明:我主要玩 ...
- java中抽象类和空的方法体有什么区别?
public abstract void test();抽象方法public void test(){};方法体为空这两个有什么区别? public abstract void test(); 抽象方 ...
- 单个和多个checkbox选中事件怎么写
单个和多个checkbox选中事件怎么写 一.总结 一句话总结: 1.checkbox的事件方法的话主要是change和click 2.checkbox的属性判断的话主要是prop(判断checked ...