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. python【第十一篇】消息队列RabbitMQ、缓存数据库Redis

    大纲 1.RabbitMQ 2.Redis 1.RabbitMQ消息队列 1.1 RabbitMQ简介 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议 ...

  2. ubuntu 下截图工具的使用

    我个人觉得,ubuntu自带的截图工具功能就不错.具体使用如下: 在ubuntu下的系统设置中找到硬盘区的“键盘”处,进入该设置界面如下: 选择标签“快捷键”,进入新设置界面如下所示: 之后,你就可以 ...

  3. git+Coding.netの小试牛刀

    一.将本地项目推送到Coding中 1.在Coding中新建项目,填写项目名称和项目描述,设置属性,勾选初始化仓库

  4. C# Http POST get

    using System.IO;using System.Net; /// <summary>        /// HttpWebRequest发送Post请求     /// < ...

  5. 需求分析Point

    1.码段的查询结果的汇总值计算有问题.被删除的是否还算是被使用范围内呢?现在是即使废弃了也算使用的.这就有范围和重叠的问题,需要识别这种集合关系的数据好概念,并搞清楚他们的关系和概念.

  6. 【POJ3415】 Common Substrings（后缀数组|SAM）

    Common Substrings Description A substring of a string T is defined as: T(i, k)=TiTi+1...Ti+k-1, 1≤i≤ ...

  7. 【UVA1633】禁止的回文串（状压DP）

    题意: 输入正整数n和k(1<=n<=400,1<=k<=10),求长度为n的01串中有多少个不含长度至少为k的回文连续子串.例如,n=k=3时只有4个串满足条件:001,01 ...

  8. （转）Mono for Android 优势与劣势

    最近有兴趣了解一下Mono for Andriod,也就是使用.NET平台来开发Andriod程序.Mono for Android API 几乎映射标准的Andriod API.例如,两边API几乎 ...

  9. 数学（概率）CodeForces 626D：Jerry's Protest

    Andrew and Jerry are playing a game with Harry as the scorekeeper. The game consists of three rounds ...

  10. canvas——画板

    注意部分: canvas的height和width不能再css中设定,应该在html中设定,否则会影响页面的分辨率. 效果图: 图1: 代码 css: #canvas{ cursor: crossha ...