[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....) 效果:数据一旦绑定到视图上,随着数据的修改,视 ... 
随机推荐
- java设计模式——单例(Singleton)模式
			在某些场景,你需要找到一个承担职责的对象,并且这个对象是他所属类的唯一实例.此时可以使用单例模式. 单例模式的意图是为了确保一个类有且仅有一个实例,并为他提供一个全局的访问点.创建一个担当独一无二角色 ... 
- spl_autoload_register()和__autoload()
			关于spl_autoload_register()和__autoload() 看两者的用法: //__autoload用法 function __autoload($classname) { ... 
- CentOS6.5升级为CentOS7.0
			CentOS6.5升级为CentOS7.0 CentOS6.5升级为CentOS7 升级前: [root@localhost ~]# cat /proc/version Linux version ... 
- javascript实现ajax
			什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ... 
- 【python常用模块】os.path
			os.path.abspath(path) #返回绝对路径 os.path.basename(path) #返回文件名 os.path.commonprefix(list) #返回list(多个路径) ... 
- 解决Maven中Missing artifact javax.jms:jms:jar:1.1:compile
			搭建好项目后报错: Missing artifact javax.jms:jms:jar:1.1:compile 于POM.xml中 解决方案: 一 :在nexus中配置一个代理仓库 地址为 ... 
- iOS uuchart 用法
			这个是 画 折线图用的 一个 第三方文件 说白了就是一个 用 贝塞尔 曲线封装好的一个 第三方. 但是有机会还是需要看下怎么用 
- program_options禁止命令行短参数
			典型的 boost program_options的用法如下: #include <boost/program_options.hpp> using namespace boost::pr ... 
- QiQi and Bonds
			只有链接:http://sdu.acmclub.com/index.php?app=problem_title&id=961&problem_id=23685 题意:现在有n个QiQi ... 
- Lua开发环境配置
			Lua(英语发音:/ˈluːə/)程序设计语言是一个简洁.轻量.可扩展的脚本语言,是葡萄牙语中“Luna”(月亮)的意思. Lua is a powerful, fast, lightweight, ... 
