AngularJS2.0 一个表单例子——总体说来还是简化了1.x 使用起来比较自然 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>NgForm</title>
    <script type="text/javascript" src="lib/system@0.16.11.js"></script>
    <script type="text/javascript" src="lib/angular2.dev.js"></script>
    <script type="text/javascript" src="lib/system.config.js"></script>
</head>
<body>
    <ez-app></ez-app>
    <script type="module">
        import {Component,View,bootstrap,NgIf} from "angular2/angular2";
        //引入form指令集
        import {formDirectives} from "angular2/forms";
        
        //EzApp组件
        @Component({selector:"ez-app"})
        @View({
            directives:[formDirectives,NgIf],
            template:`
                <form #f="form" (submit)="search(f.value)">
                    <select>
                        <option value="web">网页</option>
                        <option value="news">新闻</option>
                        <option value="image">图片</option>
                    </select>
                    <input type="text" ng-control="kw">
                    <button type="submit">搜索</button>
                </form>
                <!--给个简单的反馈-->
                <h1 *ng-if="kw!=''">正在搜索 {{kw}} ...</h1>
            `,
            styles:[`form{background:#90a4ae;padding:5px;}`]            
        })
        class EzApp{
            constructor(){
                this.kw = "";
            }
            search(val){
                this.kw = val.kw;
                //假装在搜索，2秒钟返回
                setTimeout(()=>this.kw="",2000);
            }
        }
        

        
        bootstrap(EzApp);
    </script>
</body>
</html>

 

posted @ 2017-05-11 17:35  bonelee  阅读(426)  评论(1)  编辑  收藏  举报