Instead of add todo as a string, we create a data model:

export class TodoModel{
constructor(
public title: string = ""
){}
} export class TodoService{
todos: TodoModel[] = [
new TodoModel('eat'),
new TodoModel('sleep'),
new TodoModel('work')
]; addTodo(value: TodoModel):void {
this.todos.push(value);
}
}

todoInput.ts

import {Component, View, FORM_DIRECTIVES} from "angular2/angular2";
import {TodoService, TodoModel} from "./todoService";
@Component({
selector: 'todo-input'
})
@View({
directives: [FORM_DIRECTIVES],
template: `
<form action="" (ng-submit)="onSubmit()">
<input type="text" [(ng-model)]="todoModule.title">
</form>
`
})
export class TodoInput{
todoModule:TodoModel = new TodoModel(); constructor(
//@Inject(TodoService) todoService
public todoService:TodoService
){
this.todoService = todoService;
} onSubmit(){
this.todoService.addTodo(this.todoModule);
this.todoModule = new TodoModel(); // reinit the this.todoModule
}
}

[Angular 2] Adding a data model的更多相关文章

  1. HBase 数据模型(Data Model)

    HBase Data Model--HBase 数据模型(翻译) 在HBase中,数据是存储在有行有列的表格中.这是与关系型数据库重复的术语,并不是有用的类比.相反,HBase可以被认为是一个多维度的 ...

  2. PowerDesigner从Physical Data Model转Excel

    参考资料:http://www.cnblogs.com/hggc/archive/2013/10/15/3369857.html 由于有把ER图转Excel的需求,幸运地找到一个可用脚本,稍做修改完成 ...

  3. ExtJS笔记 Ext.data.Model

    A Model represents some object that your application manages. For example, one might define a Model ...

  4. Entity Framework的核心 – EDM(Entity Data Model) 一

    http://blog.csdn.net/wangyongxia921/article/details/42061695 一.EnityFramework EnityFramework的全程是ADO. ...

  5. EF,ADO.NET Entity Data Model简要的笔记

    1. 新建一个项目,添加一个ADO.NET Entity Data Model的文件,此文件会生成所有的数据对象模型,如果是用vs2012生的话,在.Designer.cs里会出现“// Defaul ...

  6. Create Entity Data Model

    http://www.entityframeworktutorial.net/EntityFramework5/create-dbcontext-in-entity-framework5.aspx 官 ...

  7. Visualizing the Git data model

    I wrote a small tool git-graph.py over the weekend which can be used to generate the object graph of ...

  8. 自定义 ASP.NET Identity Data Model with EF

    One of the first issues you will likely encounter when getting started with ASP.NET Identity centers ...

  9. Data Model for Message Receiver

    1. Physical Data Model 2. SQL Statements drop database MessageReceiver go /*======================== ...

随机推荐

  1. BeanUtils在web项目中的应用

    package cn.gdpe.jdbc; import java.util.Enumeration; import javax.servlet.http.HttpServletRequest; im ...

  2. ios开发之xcode6中如何添加pch全局引用文件

    xcode6中去掉了默认添加pch文件,这就需要我们自己手动添加pch文件了,添加pch文件是为了一些琐碎的头文件引用,加快编译速度! 下面就说下该如何手动添加pch文件: 1.添加一个文件,在oth ...

  3. Java使用百度云存储BCS-让你的数据下载飞起来

    作者:Vinkn 来自http://www.cnblogs.com/Vinkn/ 一.简介 云也不是一个新概念了,云到底是什么东西,你叫我说个明明白白的我也说不出来,姑且算作联网的就叫做云.国内的云服 ...

  4. 谷歌地图实现车辆轨迹移动播放(google map api)

    开发技术:jquery,js baidu map api,json,ajax QQ1310651206 谷歌地图(google map api)实现车辆轨迹移动播放(google map api)

  5. wordpress整站搬家总结

    去年图便宜,也没准备认真写博文,所以花了几百元钱买了个国内空间(域名已经备案).购买了以后,放了一个wordpress博客,没事的时候写写博文,但从没有抽出时间去写,文章的质量也不追求.一开始还可以, ...

  6. .net软件工程师面试题(参考答案)

    一.填空题(每空1分,共12分) 1面向对象的语言具有__封装______性.__继承_______性.__多态______性. 2能用foreach遍历访问的对象需要实现 ____Ienumerab ...

  7. 【随记】解决:VS2010 调试器无法继续继续运行该进程,无法启动调试

    今天在调试项目的时候突然出现错误: 按照网上的一些方法弄了后还是同样报错,把本地代码删除后从库上重现拉下来的项目依然报错,到这里就明白不是项目本身问题了,而是VS2010 的问题,经过网上查资料,问同 ...

  8. ecshop 商店设置,新增或者修改字段

    当想要新增选项到ecshop的商店设置时, 第一步:在ecs_shop_config这个表增加一条设置项记录 parent_id.code.type.value type 会有 group text  ...

  9. Ubuntu14.04 安装QQ(国际版)

    1.在/etc/apt/source.list文件中添加: deb http://packages.linuxdeepin.com/deepin trusty main non-free univer ...

  10. PHP学习之中数组--创建数组【1】

    在PHP中数组的定义有三种写法,分别是: <?php //第一种方式是用关键字 array来创建的 $username = array("demo1","demo2 ...