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. linux负载均衡

    1.linux lvs nat实现负载均衡 添加两块网卡并开启路由管道 > /proc/sys/net/ipv4/ip_forward //开始路由管道 安装ipvsadm yum instal ...

  2. CHROME下载地址

    Chrome官方独立中文安装包下载地址 一般我们安装Google Chrome浏览器都是访问 http://www.google.com/chrome/?hl=zh-CN 然后下载运行ChromeSe ...

  3. python学习之 -mysql 连接和db_config配置

    最近学习python,记录下自己写学习python的代码和心得,自己写了一个使用python mysql 的查询语句和做的一个db_config.py 配置信息. 1.db_config.py 配置文 ...

  4. ASP.NET MVC轻教程 Step By Step 2 ——View初探

    在上一节我们完成了一个最简化的MVC程序,最重要的是下面这段代码. public class HomeController : Controller { public string Index() { ...

  5. linux直接启动到字符界面或从字符界面启动到图形化界面

    修改/etc/inittab文件 将内容为:"id:5:initdefault"的行的数字5改为3,保存重启即可直接进入字符界面 PS:3和5分别表示运行级别 从字符界面启动到图形 ...

  6. 一个用得比较广的微信API的XXE外部实体注入漏洞

    文件地址: https://github.com/dodgepudding/wechat-php-sdk/raw/master/wechat.class.php 代码: <?php /** * ...

  7. c# 函数相关练习

    1.输入一个正整数,求1!+2!+3!+...+n! 2.输入姓名,年龄,工作单位   我叫**,今年**岁了,现在在****工作   要求,在Main函数中接收这三个值   传到函数中打印 3.写一 ...

  8. 【HDOJ】2333 Assemble

    二分+贪心策略.其中注释处很重要. #include <iostream> #include <cstdio> #include <cstring> #includ ...

  9. weblogic启动报错之WLS_DIAGNOSTICS000000.DAT

    查看控制台日志报错信息如下: <-- 下午04时46分42秒 CST> <Notice> <Log Management> <BEA-> <The ...

  10. Android RSA加密对象数据

    前几天说了手头项目用MD5和双向加密DES来进行加密的,因为产品是在不断的改造中完善的.考虑到DES和MD5加解密还是会存下一定的风险,于是产品一拍,不行,听你们说MD5加密是不安全的,咱们产品以后做 ...