<!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. 虚拟机找不到本机vmnet0，vmnet8，无法连接xshell，解决方案

    首先出现这个问题肯定是第一次下载虚拟机把之前的注册表覆盖了,网卡找不到,首先卸载VMware 并且将C\ProgramData下的VMware文件夹删除掉 ,下载cceaner,点击注册表清除干净,再 ...

  2. Git 分支使用

    一个主分支肯定是不够用的,不同的开发最好放在不同的分支上,在最后进行合并,不然在开发中会相互干扰. PS:环境Window xp,Git-1.8.4-preview20130916(http://gi ...

  3. MySQL异常：com.mysql.jdbc.PacketTooBigException: Packet for query is too large

    ### Cause: com.mysql.jdbc.PacketTooBigException: Packet for query is too large (1169 > 1024). You ...

  4. buf.writeInt32BE()函数详解

    buf.writeInt32BE(value, offset[, noAssert]) buf.writeInt32LE(value, offset[, noAssert]) value {Numbe ...

  5. 基于python、jupyter-notebook 的金融领域用户交易行为分析

    说明:本文重在说明交易数据统计.分析方法,所有数据均为生成的数据 时间原因代码未定义成函数 统计指标:1.用户单日交易行为数据 2.按小时为计算单位,统计用户行为数据(旨在求得一天24小时中每个小时的 ...

  6. 3.6.5 空串与Null串

        空串""是长度为0的字符串.可以调用以下代码检查一个字符串是否为空:                 String s = "greeting";    ...

  7. Adobe AIR 代码签名证书使用指南

    Symantec,Thawte,GlobalSign 签发的代码签名证书都可以签名AIR文件.如果您还没有代码签名证书,请联系易维信(EVTrust)购买Adobe AIR 代码签名证书. 1.签名工 ...

  8. Truck History（卡车历史）

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 26547   Accepted: 10300 Description Adv ...

  9. 神器的方块Magic Squares

    题目背景 在成功地发明了魔方之后,鲁比克先生发明了它的二维版本,称作魔板.这是一张有8个大小相同的格子的魔板: 1 2 3 4 8 7 6 5 题目描述 我们知道魔板的每一个方格都有一种颜色.这8种颜 ...

  10. POJ2774：Long Long Message

    问两个串的最长公共子串,n<=100000. SAM可以直接搞当然SA哈希都可以..类似于KMP的做法,如果沿parent边走要顺势修改匹配位置. #include<stdio.h> ...