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的更多相关文章

  1. 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& ...

  2. Angular CLI 启动 版本ng 4

    npm install -g angular-cli ng -v ng new project_name cd project_name ng serve 浏览器打开输入 localhost:4200

  3. [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 ...

  4. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  5. Angular源代码学习笔记-原创

    时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...

  6. 将地图定位封装为ng指令

    一.HTML结构<div tabindex="-1" class="modal fade in active modal-map" role=" ...

  7. Ngnice-国内ng学习网站

    今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...

  8. 国内ng学习网站

    Ngnice-国内ng学习网站2015-01-25 21:30 by 破狼, 534 阅读, 3 评论,收藏, 编辑 今天给angular新手介绍一个国内开源的ng学习网站http://www.ngn ...

  9. Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟

    最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 环境&版本信息声明 运行ng -v @angular/ ...

随机推荐

  1. jQuery监听键盘事件及相关操作使用

    一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() k ...

  2. javascript 获取 class 样式 重新赋值class样式 为div等系列标签内更改内容

    name = document.getElementById(project_not_through_id).className;                     // 获取目标id的 cla ...

  3. PinchArea QML Type

    PinchArea类型是在QtQuick 1.1中添加进去的.PinchArea是一个不可见的对象,常用在与一个可见对象连接在一起,为对应的可见对象提供手势操作.enabled属性被用来去设置绑定对象 ...

  4. 学习Swift--下标脚本

    下标脚本 下标脚本可以定义在类(Class).结构体(structure)和枚举(enumeration)这些目标中,可以认为是访问集合(collection),列表(list)或序列(sequenc ...

  5. nutch getOutLinks 外链的处理

    转载自: http://blog.csdn.net/witsmakemen/article/details/8067530 通过跟踪发现,Fetcher获得网页解析链接没有问题,获得了网页中所有的链接 ...

  6. python 运行 hadoop 2.0 mapreduce 程序

    要点:#!/usr/bin/python 因为要发送到各个节点,所以py文件必须是可执行的. 1) 统计(所有日志)独立ip数目,即不同ip的总数 ####################本地测试## ...

  7. bzoj 2049: [Sdoi2008]Cave 洞穴勘测 动态树

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 3119  Solved: 1399[Submit] ...

  8. BZOJ 1876 SuperGCD

    Description Sheng bill有着惊人的心算能力,甚至能用大脑计算出两个巨大的数的GCD(最大公约数)!因此他经常和别人比赛计算GCD.有一天Sheng bill很嚣张地找到了你,并要求 ...

  9. SQL server语句测试

    设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一~表(四)所示,数据如表1-2的表( ...

  10. Scanner 与 Readable 的read()方法

    Readable接口中的read()方法实现了将字符串读入charBuffer中,但是只有在需要输出的时候才会调用. Scanner是文本扫描器类,利用Scanner扫描并输出charBuffer中的 ...