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. 《用chsh选择shell》-linux命令五分钟系列之十二

    chsh命令用于修改你的登录shell. 1 我想知道我机器安装了哪些shell? 两种方法可以查看: 第一种: [rocrocket@wupengchong ~]$ chsh -l /bin/sh ...

  2. 关于考虑浏览器兼容性时间的工具demo

    //支持跨浏览器的添加事件. var btn = document.getElementById("btn"); function showMes() { alert(" ...

  3. form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

    针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...

  4. C#中调用WIN32的API

    最近在学习C#中的GDI部分,本来尝试编写一个字幕控件(其实还是用label比较合适),但是发现控件中用GDI将整个控件粉刷貌似不行(应该是我水平不行),所以就去捣鼓了下WIN32的DLL,发现用AP ...

  5. IIS10 设置支持wcf服务(.svc)

    感谢: http://www.cnblogs.com/dudu/p/3328066.html 如果提示web.config配置重复的话,很有可能是.net framework版本的问题,把IIS中的版 ...

  6. test知识

    内部测试SIT ——system integration testcase 用户测试UAT——user acceptance test SIT是集成测试UAT是验收测试从时间上看,UAT要在SIT后面 ...

  7. start-tomcat7.launch

    <?xml version="1.0" encoding="UTF-8" standalone="no"?> <launc ...

  8. 具有 Button 风格的 Panel(覆盖TCustomPanel的Paint函数,用到了ThemeServices)

    unit Unit2; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  9. [C#] - 注入DLL

    原文:http://xyzlht.blog.163.com/blog/static/69301417200882834211787/ ) { MessageBox.Show("创建远程线程失 ...

  10. VS2012中使用编译的Qt-5.1.1静态库开发程序

    1. 安装qt-vs-addin-1.2.2-opensource.exe,安装之后,vs2012菜单栏就会出现QT5菜单. 2. 在qt-vs-addin添加Qt5静态库: QT5->Qt O ...