angularjs2进阶教程1-编辑英雄
2017-03-03 10:22
351 查看
还是 angularjs2入门1-文件结构分析 的源码,将app名称tutorial-step1-editor
1.在组件app.component.ts中创建一个英雄类, 有id和name两个参数
1.在组件app.component.ts中创建一个英雄类, 有id和name两个参数
export class Hero { id: number; name: string; }在组件控制器中写入
hero: Hero = { id: 1, name: 'Windstorm' };页面上
template:` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input value="{{hero.name}}" placeholder="name"> </div> `上面的是单向绑定,可以改成双向绑定
<input [(ngModel)]="hero.name" placeholder="name">这个改变了input的值,<h2>的值也改变了
相关文章推荐
- angularjs2进阶教程3-建立英雄详情组件
- AngularJS进阶(三)HTML:让表单、文本框只读,不可编辑的方法
- AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
- FPE修改教程进阶(地址编辑部分)
- AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
- angularjs2进阶教程2-建立一个主/详细页面的英雄名单
- AngularJS进阶(三)HTML:让表单、文本框只读,不可编辑的方法
- angularjs2进阶教程-项目介绍
- angularjs2进阶教程6-http服务
- WebMatrix进阶教程(7):创建一个编辑数据网页
- PyQt5 - QWidgets部件进阶教程之行编辑
- AngularJS教程:英雄编辑器
- angularjs2进阶教程4-创建可重用的服务数据
- Scott Mitchell 的ASP.NET 2.0数据教程之三十九:: 在编辑和插入界面里添加验证控件
- JavaScript进阶教程(第一课)第1/3页
- JavaScript进阶教程(第三课)第1/2页
- JavaScript进阶教程(第二课)第1/3页
- JAVA初学教程进阶
- Photoshop7.0教程(七)绘图和编辑路径
- Scott Mitchell 的ASP.NET 2.0数据教程之三十六:: 综叙:在DataList里编辑和删除数据