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. 《bunzip2命令》-linux命令五分钟系列之八

    本原创文章属于<Linux大棚>博客. 博客地址为http://roclinux.cn. 文章作者为roc 希望您能通过捐款的方式支持Linux大棚博客的运行和发展.请见“关于捐款” == ...

  2. php之文件上传类代码

    /* 单个文件上传 功能 上传文件 配置允许的后缀 配置允许的大小 获取文件后缀 判断文件的后缀 报错 */ class UpTool{ protected $allowExt = 'jpg,jpeg ...

  3. Tomcat环境变量的配置

    Tomcat web服务器 支持全部JSP以及Servlet规范 主要作用 是提供了一个可以让Jsp和Servlet运行的平台 tomcat环境变量设置 CATALINA_HOME : D:\bran ...

  4. 微博输入相关js 代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. ajax xmlhttprequest status

    status 0**:未被始化 status 1**:请求收到,继续处理 status 2**:操作成功收到,分析.接受 status 3**:完成此请求必须进一步处理 status 4**:请求包含 ...

  6. PHP面向对象(OOP):__call()处理调用错误

    在程序开发中,如果在使用对象调用对象内部方法时候,调用的这个方法不存在那么程序就会出错,然后程序退出不能继续执行.那么可不可以在程序调用对象内部 不存在的方法时,提示我们调用的方法及使用的参数不存在, ...

  7. js+dom开发第十六天

    一.css常用标签及页面布局 1.常用标签 position(定位) z-index(定位多层顺序) background(背景) text-align(针对字符自动左右居中) margin(外边距) ...

  8. Webservices-2.C#创建web服务,及引用访问、代码访问

    注:web服务简介Webservices-1.web服务定义简介 以下均以C#语言为例 一.创建web服务(简单介绍,主要讨论客户端引用) 打开VS创建网站项目,在网站项目中添加“WEB服务(ASMX ...

  9. 使用iOS8 WKWebView的浏览器模块,脉冲动画层-b

    KINWebBrowser是一个可嵌入app的浏览器模块. 它使用iOS 8的 WKWebView API编写,同时在iOS 7上使用UIWebView来兼容. 测试环境: Xcode 6.0 iOS ...

  10. 一种计算e的方法

    原文地址:http://hankjin.blog.163.com/blog/static/3373193720108811316123/ 原理:平均e个(0,1)之间的随机数之和会大于1.原因:n个数 ...