[Angular 2] 9. Replace ng-modle with #ref & events
Let's say you want to write a simple data bing app. when you type in a text box, somewhere in the application will show the result.
In Angular 1, you can use ng-model to finish all those stuff, but in angular 2, the concept behind has changed.
<!-- index.html -->
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<hello></hello>
<script>System.import('app');</script>
</body>
</html>
import {
Component,
View,
bootstrap
} from 'angular2/angular2';
@Component({
selector: 'hello'
})
@View({
template: `
<div>
<label for="name">Name: </label>
<input type="text" #ref (keyup)/>
<hr />
<h2>{{ref.value}}</h2>
</div>
`
})
export class Hello{
}
bootstrap(Hello);
We add a #ref, which you can name it anything you want after '#'. And then use 'ref.value' to the actual value from it.
But only this won't work.. you also need to watch it. In Angualr 2, this is acomplished by add even listener to the dom. Here we use '(keyup)'.
[Angular 2] 9. Replace ng-modle with #ref & events的更多相关文章
- angular报错：angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq
报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...
- Angular CLI 启动 版本ng 4
npm install -g angular-cli ng -v ng new project_name cd project_name ng serve 浏览器打开输入 localhost:4200
- [Angular Directive] Build a Directive that Tracks User Events in a Service in Angular 2
A @Directive is used to add behavior to elements and components in your application. This makes @Dir ...
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- Angular源代码学习笔记-原创
时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...
- 将地图定位封装为ng指令
一.HTML结构<div tabindex="-1" class="modal fade in active modal-map" role=" ...
- Ngnice-国内ng学习网站
今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...
- 国内ng学习网站
Ngnice-国内ng学习网站2015-01-25 21:30 by 破狼, 534 阅读, 3 评论,收藏, 编辑 今天给angular新手介绍一个国内开源的ng学习网站http://www.ngn ...
- Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟
最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 环境&版本信息声明 运行ng -v @angular/ ...
随机推荐
- 不错的轮播插件flexslider
http://flexslider.woothemes.com/ $('.flexslider').flexslider({ animation:'slide', //滑动效果:翻页效果,默认为fad ...
- Yeoman安装
Yeoman帮助我们创建项目,提供更好的工具来使我们的项目更多样化. Yeoman提供generator系统,一个generator是一个插件,在我们在一个完整的项目上使用‘yo’命令时,会运行该ge ...
- Js 简单分页（一）
网上有很多分页的插件 但是没有自己想要的 上代码吧,只有分页部分代码,css 省略了 html <div class="bar2 fr" id="pagecontr ...
- Web Adaptor重装配置时 提示已经配置成功的问题
环境 ArcGIS 10.1/10.2/10.3 Windwos 8.1 Tomcat 7.0.5 问题描述 较早之前在本机上安装配置过一个10.2.1版本的ArcGIS产品,包括桌面.Server和 ...
- svn代码统计
http://chenzhou123520.iteye.com/blog/1436653
- tyvj P1716 - 上帝造题的七分钟 二维树状数组区间查询及修改 二维线段树
P1716 - 上帝造题的七分钟 From Riatre Normal (OI)总时限:50s 内存限制:128MB 代码长度限制:64KB 背景 Background 裸体就意味着 ...
- ios7新特性2--多任务提升
iOS 7 为应用程序提供新的后台执行模式: 应用程序需要需要下载新内容,可以向系统注册,这样程序会被定期唤起或者启动,然后可以在后台下载内容.要注册这个功能,需要打开Info.plist 文件,设置 ...
- php调用linux命令
php有以下接口可提供执行外部函数: system() exec() popen() 但要使用上面几个函数,首先,要配置php.ini配置文件.修改配置文件如下: safe_mode = off; 改 ...
- 第1章（三）安装VS2015和Xamarin For VS
原文 第1章(三)安装VS2015和Xamarin For VS 操作系统:Win7 64位(sp1或更高版本) 1.安装VS2015 VS2015简体中文企业版:vs2015.ent_chs.is ...
- TCP/IP FTP/TFTP
引言 从一台计算机向另一台计算机传送文件是在连网或互联网环境中最常见的任务.而FTP和TFTP就是这样的协议. 关于文件传输协议FTP? 端口21使用服务TCP [FTP模型] FTP连接? 1.控制 ...