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. 网站商务通链接快速标识v1.0.js

    js代码为: function getSwt(keys){ try{ if(openZoosUrl&&typeof(openZoosUrl)=="function" ...

  2. Android中用Application类实现全局变量

    最近在项目中,遇到了application这个类,开始不知道有什么用,经过学习后才知道它的用途也蛮大的,举个例子,如果想在整个应用中使用全局变量,在java中一般是使用静态变量,public类型:而在 ...

  3. Colletion View 简单的备忘

    UIColletionView 这篇只是做UIColletionView的常用属性.代理方法和数据源方法的备忘,之后做一些自定义布局,增加删除动画等. UIColletionViewFlowLayou ...

  4. 配有Tesla K40c的服务器新装Ubuntu16.04并安装CUDA8.0、Anaconda3、Matlab2016a、OPENCV3.1、CuDNN5.1、MXNet

    注:本文原创,作者:Noah Zhang  (http://www.cnblogs.com/noahzn/) 决定加入深度学习的大军,感谢导师给配了台新设备!第一次接触服务器并配置开发环境,整个过程中 ...

  5. C++中Reference与指针（Pointer）的使用对比

    整理日: 2015年3月18日 引用(reference)和指针(pointer)是学C++过程中最令人头疼的问题,常常不知道什么时候用哪个合适,又常常弄混.找到Dan Saks的这篇文章,讲的很清楚 ...

  6. 教你把UIView切成任意形状

    有时候layer.cornerRadius并不能满足需求,自己实现drawRect又太麻烦,怎么办? 多的不说,直接上代码: - (void)dwMakeBottomRoundCornerWithRa ...

  7. 吉哥系列故事——完美队形II

    hdu4513:http://acm.hdu.edu.cn/showproblem.php?pid=4513 题意:给以一个序列,然后让你求一个最长回文序列的长度,这个序列的从左到最中间那个数是不降的 ...

  8. Android基础之响应Menu键弹出菜单Demo

    对于Android我也不是很熟悉,只是学习一些基本内容就OK.所以写的内容也很简单.本Demo要实现的效果就点击Menu键将弹出一个菜单并响应点击菜单项事件. 一.废话少说直接上代码.其实就是重写两个 ...

  9. ServiceStack.Redis常用操作 - 事务、并发锁

    一.事务 使用IRedisClient执行事务示例: using (IRedisClient RClient = prcm.GetClient()) { RClient.Add("key&q ...

  10. 1044 - Palindrome Partitioning（区间DP）

    题目大意: 给你一个字符串,问这个字符串最少有多少个回文串. 区间DP直接搞     #include<cstdio> #include<cstring> #include&l ...