angular 数据绑定的四种形式
2018-03-12 19:43
204 查看
<div> <li>{{hero.name}}</li><app-hero-detail [hero]="selectedHero"></app-hero-detail><li (click)="selectHero(hero)"></li> </div>
1. {{hero.name}}插值表达式在<li>标签中显示组件的hero.name属性的值。
2. [hero]属性绑定把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。
3. (click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。
4. 双向数据绑定是重要的第四种绑定形式,它使用ngModel指令组合了属性绑定和事件绑定的功能 <input [(ngModel)]="hero.name">
相关文章推荐
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
- ASP.NET 内联代码、内联表达式、数据绑定表达式使用方法罗列(形式就是常说的尖括号 百分号 等于号 井号)
- Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
- Angular之双向数据绑定基础
- angular的数据绑定
- angular2数据的双向绑定
- Angular双向数据绑定简易实现
- Angular2双向数据绑定
- 【angular】指令及数据绑定入门
- 详解Angular的双向数据绑定(MV-VM)
- angular数据绑定
- Angular2数据绑定详解
- JavaScript实现简单的双向数据绑定(Ember、Angular、Vue)
- Angular 2 中的数据绑定
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
- Angular双向数据绑定原理之脏检查分析
- javascript 函数中的 this 的四种绑定形式
- 七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
- Angular.js数据绑定时自动转义html标签及内容
- 【angular】指令及数据绑定入门