HTML属性绑定

1.基本Html属性绑定

  • <td [attr.colspan]="tableColspan">something</td>

2.css类绑定

  • <div [class]="someEle">something</div>
  • <div class="aaa,bbb" [class.ccc]="isSpec">something</div>
  • <div [ngClass]="{aaa:isA,bbb:isB}">something</div>

3.样式绑定

  • <button [style.color]="ispec ? 'red' : 'green'">something</button>

数据绑定

HTML属性和DOM属性的关系

1.少量html属性和DOM属性之间有着1:1的映射,如id

2.有些HTML属性没有对应的DOM属性,如 colspan

3.有些DOM属性没有对应的HTML属性,如 textContent

4.就算名字相同,html属性和DOM属性也不是同样的东西

5.HTML属性的值指定了初始值;DOM属性的值表示当前值。

DOM属性的值可以改变;HTML属性的值不能改变

6.模板绑定是通过DOM属性和事件来工作的,而不是HTML属性

angular4 数据绑定的更多相关文章

  1. Angular4.0从入门到实战打造在线竞拍网站学习笔记之四--数据绑定&管道

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 数据绑定 数据绑定允许你将组件控制器的属性和方法与组件的模板连接起来,大大降低了开发时的编码量. ...

  2. Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...

  3. angular4.0中form表单双向数据绑定正确姿势

    issue:用[(ngModel)]="property"指令双向数据绑定,报错. reason1:使用ngModel绑定数据需要注入FormsModule模块,在app.modu ...

  4. Angular4学习笔记(五)- 数据绑定、响应式编程和管道

    概念 Angular中的数据绑定指的是同一组件中控制器文件(.ts)与视图文件(.html)之间的数据传递. 分类 流向 单向绑定 它的意思是要么是ts文件为html文件赋值,要么相反. ts-> ...

  5. angular4自定义组件非input元素实现ngModel双向数据绑定

    在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... ...

  6. angular4+中的数据绑定

    1,基本的属性绑定,下面的两种形式是一样的 2.dom属性和html属性 3.两者关系的进一步总结 4.dom属性绑定 5.html属性绑定

  7. AngularJs学习笔记2-控制器、数据绑定、作用域

    上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...

  8. Angular4.0学习笔记 从入门到实战打造在线竞拍网站学习笔记之二--路由

    Angular4.0基础知识见上一篇博客 路由 简介 接下来学习路由的相关知识 本来是不准备写下去的,因为当时看视频学的时候感觉自己掌握的不错 ( 这是一个灰常不好的想法 ) ,过了一段时间才发现An ...

  9. Angular4.0从入门到实战打造在线竞拍网站学习笔记之三--依赖注入

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 依赖注入(Dependency Injection) 正常情况下,我们写的代码应该是这样子的: let product = ne ...

随机推荐

  1. 程序员50题(JS版本)(五)

    程序21:有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13...求出这个数列的前20项之和. var arr=[]; var count=20; for(var i=0;i<= ...

  2. 二次剩余Cipolla算法学习笔记

    对于同余式 \[x^2 \equiv n \pmod p\] 若对于给定的\(n, P\),存在\(x\)满足上面的式子,则乘\(n\)在模\(p\)意义下是二次剩余,否则为非二次剩余 我们需要计算的 ...

  3. zabbix3.4 监控mysql 数据库连接数

    zabbix3.4 监控mysql 数据库连接数具体监控配置待定,近期即将发布!

  4. Android网络图片转换成bitmap保存到本地指定文件夹

    下列代码,请求网络图片转换为bitmap,然后保存到指定文件夹,微信,QQ分享,要求缩略图不大于32kb 压缩图片代码,使用了Glide来进行图片压缩处理 Glide.get(ShopDetailsA ...

  5. android FragmentTabhost导航分页

    基本模板 public class MainActivity extends FragmentActivity { private FragmentTabHost mTabHost; private ...

  6. textarea 输入长度限制

    <textarea " placeholder="请输入详细地址(100字以内)"></textarea>

  7. Xutils, OKhttp, Volley, Retrofit对比

    Xutils这个框架非常全面,可以进行网络请求,可以进行图片加载处理,可以数据储存,还可以对view进行注解,使用这个框架非常方便,但是缺点也是非常明显的,使用这个项目,会导致项目对这个框架依赖非常的 ...

  8. C# 反射的例子

    通过字符串变量访问控件 string t = "textbox1"; TextBox tb = (TextBox)this.GetType().GetField(t, System ...

  9. lnmp环境里安装mssql及mssql的php扩展

    小活中用到mssql,于是在自己lnmp环境中安装各mssql数据库 步骤如下: 源码编译安装 (1)下载freetds-stable-0.91源码:http://download.csdn.net/ ...

  10. AngularJS学习之旅—AngularJS 过滤器(七)

    1.AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter ...