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. css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括

    *知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...

  2. input file文件上传样式

    <style>    .file-group {        position: relative;        width: 200px;        height: 80px;  ...

  3. 当INPUT 连续输入是连续触发

    在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理 ...

  4. linux 下makefile

    linux下c编程中makefile是必须会的,我刚开始学,将我对makefile的理解记录下来. 通常我们在windows下编写c程序,有各种ide工具为我们执行makefile工作但在linux下 ...

  5. 查看Oracle是否锁表

    --Oracle数据库操作中,我们有时会用到锁表查询以及解锁和kill进程等操作,那么这些操作是怎么实现的呢?本文我们主要就介绍一下这部分内容. --(1)锁表查询的代码有以下的形式: select ...

  6. codevs 1078 最小生成树

    题目描述 Description 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 约翰已经给他的农场安排了一条高速的网络线路,他想把这 ...

  7. linux 发布 qt(更新ld命令的路径依赖)

    PATH 错误解决error while loading shared libraries: libXXX.so.X: cannot open shared object file: No such ...

  8. 基于百度定位SDK的定位服务的实现

    转载请标明出处:http://blog.csdn.net/android_ls/article/details/10179013 一.定位模块的需求:我们想知道使用我们应用的用户的大概位置,每隔五分钟 ...

  9. 【HDOJ】1760 A New Tetris Game

    博弈,主要是求SG值.终于做出点儿感觉. /* 1760 */ #include <cstdio> #include <cstring> #include <cstdli ...

  10. 《深入Linux内核》 UNIX的一些故事

    Unix文件的类型1.普通文件2.目录3.符号链接4.面向块的设备文件5.面向字符的设备文件6.管道和命名管道7.套接字 点评:不明觉厉 打开文件进程只能访问“打开的”文件.为了打开一个文件,进程调用 ...