Two-way binding still exists in Angular 2 and ng-model makes it simple. The syntax is a combination of the [input] and (output) syntax to represent that the data is being pushed out and pulled in.

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

[Angular 2] Using ng-model for two-way binding的更多相关文章

  1. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  2. Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy

    ng-app   定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...

  3. ANGULAR 使用 ng build --prod 编译报内存错误的解决办法

    如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...

  4. angular的双向数据绑定

    方向1:模型数据(model) 绑定 到视图(view) 实现方法1:{{model变量名}} $scope.num=10 <p>{{num}}</p> 实现方法2: 常用指令 ...

  5. Angular.js 的初步认识

    MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控 ...

  6. Angular(1)

    1.设计原则 1.YAGNI  不要把未来需求引入当前工程   2.KISS  keep it simple and stupid  语义化标记 合理注释 符合规定的命名 3.DRY(don't re ...

  7. angular(常识)

    我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...

  8. (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...

  9. Angular之 Scope和 Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

  10. ng 双向数据绑定

    1.方向1:model->View模型数据绑定到视图 绑定的方式:①双花括号 ②常见的ng指令(ngRepeat ngIf ngShow....) 效果:数据一旦绑定到视图上,随着数据的修改,视 ...

随机推荐

  1. CPU与外设传送数据方式

    7.2 CPU与外设之间数据传送的方式 在微型计算机系统中,CPU与外设之间的数据传送方式主要有程序传送方式.中断传送方式和直接存储器存取(DMA)传送方式,分别介绍如下.     7.2.1 程序传 ...

  2. Java多线程:常用的实现多线程的两种方式

    之所以说是常用的,是因为通过还可以通过java.util.concurrent包中的线程池来实现多线程.关于线程池的内容,我们以后会详细介绍;现在,先对的Thread和Runnable进行了解.本章内 ...

  3. 【C语言】结构组成(函数、语句、注释)

    C语言结构组成 一.相关基础知识 二.具体内容 C语言由函数.语句和注释三部分组成: )函数与主函数:     一个C语言源程序可以由一个或多个源文件组成,每个源文件可由一个或多个函数组成,一个源程序 ...

  4. 【C语言】严格区分大小写

    C语言严格区分大小写 一.相关基础知识 二.具体内容 C语言严格区分大小写: 如: int为关键字,INT则为用户标识符,即可定义int INT;   int INt;   int Int;  cha ...

  5. bzoj3637: Query on a tree VI

    Description You are given a tree (an acyclic undirected connected graph) with n nodes. The tree node ...

  6. 转:2014 年 15 款新评定的最佳 PHP 框架

    原文来自于:http://blog.jobbole.com/59999/ 原文出处: codegeekz   译文出处:oschina   欢迎分享原创到伯乐头条 通常,框架都会被认为是帮助开发者快速 ...

  7. BZOJ 1048 分割矩阵

    Description 将一个a*b的数字矩阵进行如下分割:将原矩阵沿某一条直线分割成两个矩阵,再将生成的两个矩阵继续如此分割(当然也可以只分割其中的一个),这样分割了(n-1)次后,原矩阵被分割成了 ...

  8. AVL树的算法思路整理

    http://www.cnblogs.com/heqile/archive/2011/11/28/2265713.html 看完了<数据结构与算法分析(C++描述)>的4.4节AVL树,做 ...

  9. cf C. Arithmetic Progression

    http://codeforces.com/contest/382/problem/C 题意:给你n个数,然后让你添加一个数使得n+1个数能形成这样的规律,a[1]-a[0]=a[2]-a[1]=a[ ...

  10. 使用 InstallShield limited edition 打包部署Outlook 2013 Office add-in插件

    原文: Outlook: Deploying an Outlook 2013 add-in (using InstallShield LE) Today I had to create an inst ...