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. iOS 数据持久性存储-属性列表

    iOS上常用四种数据存取方法有: 1.属性列表 2.对象归档 3.iOS的嵌入式关系数据库(SQLite3) 4.苹果公司提供持久性共聚Core Data 由于苹果公司的沙盒机制,每个应用程序都有自己 ...

  2. Django socketio 安装

    如果你还没有安装过 gevent,首先需要安装 libevent, 编译安装 libevent 需要安装 Pyhton 开发库. 在Debain上可以运行如下指令: $ sudo apt-get in ...

  3. 【算法】简单选择排序 O(n^2) 不稳定的 C语言

    简单选择排序 一.算法描述 假设序列中有N个元素: 第1趟找到第1到N个元素之间最小的一个,与第1个元素进行交换 第2趟找到第2到N个元素之间最小的一个,与第2个元素进行交换 第3趟找到第3到N个元素 ...

  4. 强制不使用“兼容性视图”的HTML代码(转)

    在IE8浏览器以后版本,都有一个“兼容性视图”,让不少新技术无法使用.那么如何禁止浏览器自动选择“兼容性视图”,强制IE以最高级别的可用模式显示内容呢?下面就介绍一段HTML代码. X-UA-Comp ...

  5. Perl常用特殊变量

    perl 内置变量 $- 当前页可打印的行数,属于Perl格式系统的一部分 $! 根据上下文内容返回错误号或者错误串 $” 列表分隔符 $# 打印数字时默认的数字输出格式 $$ Perl解释器的进程I ...

  6. [BC Round#26] Card 【各种水】

    题目链接:HDOJ - 5159 这道题的做法太多了..BC的第二题也是可以非常水的.. 算法一 我在比赛的时候写的算法是这样的.. 预处理出所有的答案,然后对于每个询问直接输出. 询问 (a, b) ...

  7. C# Linq-Aggregate

    The easiest to understand definition of Aggregate is that it performs an operation on each element o ...

  8. JButton 做图片框

    JButton setHorizontalTextPosition(SwingConstants.CENTER);// 在水平方向文字位于图片中央 setVerticalTextPosition(Sw ...

  9. pgAdminIII使用图解

    原文地址:http://www.2cto.com/database/201312/267218.html pgAdmin III简介 要打开一个到服务的连接,在树中选择所需的服务,并双击它,或使用“工 ...

  10. UVa11248 Frequency Hopping(最大流+最小割)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=33206 [思路] 最大流最小割. 可以确定的是如果不可行需要修改的 ...