zoukankan      html  css  js  c++  java
  • [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)'.

  • 相关阅读:
    [Bullet3]创建世界(场景)及常见函数
    [erlang]supervisor(监控树)的重启策略
    [game]十字链表的AOI算法实现
    [翻译][erlang]cowboy handler模块的使用
    数据挖掘算法系列目录
    Spark原理分析目录
    Spark实战系列目录
    2019年读书书单
    Hadoop源码解读系列目录
    分布式架构系列目录
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4812027.html
Copyright © 2011-2022 走看看