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

  1. export class TodoModel{
  2. constructor(
  3. public title: string = ""
  4. ){}
  5. }
  6.  
  7. export class TodoService{
  8. todos: TodoModel[] = [
  9. new TodoModel('eat'),
  10. new TodoModel('sleep'),
  11. new TodoModel('work')
  12. ];
  13.  
  14. addTodo(value: TodoModel):void {
  15. this.todos.push(value);
  16. }
  17. }

todoInput.ts

  1. import {Component, View, FORM_DIRECTIVES} from "angular2/angular2";
  2. import {TodoService, TodoModel} from "./todoService";
  3. @Component({
  4. selector: 'todo-input'
  5. })
  6. @View({
  7. directives: [FORM_DIRECTIVES],
  8. template: `
  9. <form action="" (ng-submit)="onSubmit()">
  10. <input type="text" [(ng-model)]="todoModule.title">
  11. </form>
  12. `
  13. })
  14. export class TodoInput{
  15. todoModule:TodoModel = new TodoModel();
  16.  
  17. constructor(
  18. //@Inject(TodoService) todoService
  19. public todoService:TodoService
  20. ){
  21. this.todoService = todoService;
  22. }
  23.  
  24. onSubmit(){
  25. this.todoService.addTodo(this.todoModule);
  26. this.todoModule = new TodoModel(); // reinit the this.todoModule
  27. }
  28. }

[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. windows7 64 位 mysql 5.6.12 安装

    1.修改 my-default.ini 改名为 my.ini 内容修改为 [mysqld] loose-default-character-set = utf8    basedir = D:/mys ...

  2. NewRowNeeded和UserAddedRow事件以及RowsAdded的区别使用

    NewRowNeeded事件当 VirtualMode 属性为 true 时,将在用户定位到 DataGridView 底部的新行时发生,适合给新行建立一些默认数据和按规则应该产生的数据,但此时不推荐 ...

  3. NPOI使用手册

    HSSFSheet sheet = hssfworkbook.CreateSheet("new sheet"); // Create a row and put some cell ...

  4. 那些年被我坑过的Python——道阻且长(第五章实用模块讲解)

    random模块 我的随机验证吗程序: 首先保证了字母和数字出现的概率是50% VS 50%,其次是可以订制输出多少位 def Captcha(size): Captcha_list = [] for ...

  5. C语言-01基础语法

    1)         总结常见文件的拓展名 .c 是C语言源文件,在编写代码的时候创建 .o 是目标文件,在编译成功的时候产生 .out 是可执行文件,在链接成功的时候产生 2)         总结 ...

  6. NandFlash驱动框架

    1.首先和前面的几个驱动程序相似,需要分配一个nand_chip结构体 s3c_nand = kzalloc(sizeof(struct nand_chip), GFP_KERNEL); 然后填充该结 ...

  7. 首页重定位到mian.action上

    <body onload="top.location.href='<%=request.getContextPath()%>/main.action';">

  8. Children of the Candy Corn

    poj3083:http://poj.org/problem?id=3083 题意:给你一个迷宫,然后给你一个起点和终点,现在给你种规则,一种是先向左,无法向左则向前,无法向前则向右,否则则向后,另外 ...

  9. iOS开发学习--纯代码 UIScrollView 无限循环的实现——代码类封装

    一个简单的利用UIScrollView 实现的无线滚动banner,下面的代码实现,因为封装问题,对两个及一下的view 支持出了一点问题(view是传参进来的,不可以生成两份),但是原理是正确的,智 ...

  10. ORACLE和MONGODB,必须也得进入。

    先在WIN下面操作一下. 参考的是<MONGODB权威指南>