[Angular 2] Using ng-model for two-way binding
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的更多相关文章
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy
ng-app 定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...
- ANGULAR 使用 ng build --prod 编译报内存错误的解决办法
如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...
- angular的双向数据绑定
方向1:模型数据(model) 绑定 到视图(view) 实现方法1:{{model变量名}} $scope.num=10 <p>{{num}}</p> 实现方法2: 常用指令 ...
- Angular.js 的初步认识
MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控 ...
- Angular(1)
1.设计原则 1.YAGNI 不要把未来需求引入当前工程 2.KISS keep it simple and stupid 语义化标记 合理注释 符合规定的命名 3.DRY(don't re ...
- angular(常识)
我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...
- (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...
- Angular之 Scope和 Directive
---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...
- ng 双向数据绑定
1.方向1:model->View模型数据绑定到视图 绑定的方式:①双花括号 ②常见的ng指令(ngRepeat ngIf ngShow....) 效果:数据一旦绑定到视图上,随着数据的修改,视 ...
随机推荐
- TestNG目录
1 - 简介 2 - 注解 3 - testng.xml 4 - 执行 TestNG 5 - 测试方法, 测试类 和 测试组 5.1 - 测试方法 5.2 - 测试组 5.3 ...
- scons小结
scons是用python写的,据说是比make要方便很多,其实我都没写过makeFile...... 1.安装 方式1:下载安装包安装,需要用python setup.py install去编译 方 ...
- [R] /usr/share/doc/apache2/README.Debian.gz
Contents======== Apache2 Configuration under Debian GNU/Linux Files and Directories in '/etc/apache2 ...
- WAMP集成环境更改web根目录
使用WAMP集成环境,如何更改web根目录 做php开发使用WAMP集成环境的同学大部分有过这样的经历:如果你试图修改web根目录,那么你肯定会想到要修改apache/apache2.2.11/con ...
- C#,Java,C++中的finally关键字
博客原文:http://hankjin.blog.163.com/blog/static/33731937201031511305338/ 先说C++,标准C++不支持finally, 如果要实现fi ...
- BZOJ 1029 建筑抢修
Description 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是T部落的基地里已经有N个建筑设施受到了严重的损伤,如果不尽快修 ...
- ARM单片机的头文件如何用结构体定义地址
下面我们以ARM Cortex-M0内核单片机LPC1114的头文件lpc11xx.h文件进行说明. 1.先说两句 lpc11xx.h文件是lpc11xx系列单片机包含的头文件.这个文件的作用和51单 ...
- A Simple problem
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2497 题意:给出顶点数,边数及节点s,判断s是 ...
- HDOJ 2014 青年歌手大奖赛_评委会打分
Problem Description 青年歌手大奖赛中,评委会给参赛选手打分.选手得分规则为去掉一个最高分和一个最低分,然后计算平均得分,请编程输出某选手的得分. Input 输入数据有多组,每组占 ...
- Redis结合EntityFramework结合使用的操作类
最近一段时间在研究redis. 各种不懂, 各种问题.也看了N多的资料. 最终参照着 张占岭 的博客 http://www.cnblogs.com/lori/p/3435483.html 写 ...