<!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>

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

  1. 基于Ant Design Vue封装一个表单控件

    开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...

  2. 开发日志系列：一个表单页面的呈现与提交（一）——JSON的操作

    JSON操作 引子 最近在做一个表单页面,大概是这个样子的 这里打算用一个JSON存储所有的信息,我们可以理解为,所有东西都存在一个字符串里面.方便,快捷,易读,数据库操作也方便了.甚至,可以将很多不 ...

  3. jquery做一个表单验证

    正则表达式的写法: var re=new RegExp('规则', '可选参数');var re=/规则/参数;(这个最常用) 正则表达式的规则 和其他语言的正则表达式规则一样,可以参考我的另一边博文 ...

  4. Js定义一个表单并提交

    Js定义一个表单 var form = $("<form>"); //定义一个form表单 form.attr('style', 'display:none'); // ...

  5. javascript:正则表达式、一个表单验证的例子

    本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 正则表达式: 正则表达式的使用方法: 首先创 ...

  6. 迈向angularjs2系列(7):表单

    目录 一:校验表单的使用 1.搭建脚手架 2.校验表单的使用 3.select下拉列表的用法 一: 校验表单的使用 对于CRUD型的应用,表单是必备组件. 1.搭建脚手架 git clone http ...

  7. golang-web框架revel一个表单提交的总结

    这里要介绍好是revel框架的表单post提交的列子,主要是用于入门学习,和一些知识点的讲解: 首先: 来了解一个问题那就是重复提交表单,做过form表单提交的同学都知道,如果表单提交后不做处理,那么 ...

  8. 【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理

    最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...

  9. 【Flask】 python学习第一章 - 6.0 WTF表单 数据库 蓝图

    WTF表单  wtf.py pip install flask-wtf  # 安装 from flask_wtf import FlaskForm from wtform import StringF ...

随机推荐

  1. 梦想MxWeb3D协同设计平台 2019.02.28更新

    梦想MxWeb3D协同设计平台 2019.02.28更新 SDK开发包下载地址: http://www.mxdraw.com/ndetail_10130.html 在线演示网址: http://www ...

  2. vuex与redux,我们都一样

    vuex与redux的主要区别: redux:生成的全局数据流是通过每个组件的props逐层传递到各个子组件的,通过@connect装饰器绑定在this.props上面. vuex :生成的全局数据则 ...

  3. java.net.MalformedURLException: no protocol: www.baidu.com

    URL url = new URL("www.baidu.com");改为 URL url = new URL("http://www.baidu.com");

  4. Dollar Dayz POJ - 3181

    解法 完全背包+大数...不想写大数了放个python得了 代码 dp=[0 for i in range(2000)] n,k=map(int,input().split()) num=[i for ...

  5. Python学习笔记（3）动态类型

    is运算符 ==是值相等而is必须是相同的引用才可以 l=[1,2,3] m=[1,2,3] print(l==m) # True print(l is m) # False sys模块 getref ...

  6. 如何防止XshellPortable、putty、SecureCRT等断网造成Linux命令中断

    在使用XshellPortable.putty.SecureCRT等工具远程连接Linux系统时,如果我们执行了一大堆命令,在命令尚未执行完毕,客户端突然断网或者XshellPortable.putt ...

  7. python3.x Day1 用户登录程序练习

    训练1: 模拟登陆: 1. 用户输入帐号密码进行登陆 2. 用户信息保存在文件内 3. 用户密码输入错误三次后锁定用户 login2.py: #!/usr/bin/env python # -*- c ...

  8. 【Codeforces 246D】Colorful Graph

    [链接] 我是链接,点我呀:) [题意] 让你找到所有和x颜色的点中,和该颜色的点颜色不同的相邻的点的个数(重复颜色算一次) 求出哪种颜色的所要求的点的数量最多. [题解] 对于每一条边只会被查到两次 ...

  9. java 生成20位唯一ID，生成不会重复的20位数字----https://blog.csdn.net/weixin_36751895/article/details/70331781

    java 生成20位唯一ID,生成不会重复的20位数字----https://blog.csdn.net/weixin_36751895/article/details/70331781

  10. Tyvj1139 向远方奔跑（APIO 2009 抢掠计划）

    描述     在唐山一中,吃饭是一件很令人头疼的事情,因为你不可能每次都站在队伍前面买饭,所以,你最需要做的一件事就是——跑饭.而跑饭的道路是无比艰难的,因为路是单向的(你要非说成是双向的我也没法,前 ...