<!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. Linux终端常用快捷操作

    命令或文件名自动补全:在输入命令或文件名的前几个字母后,按Tab键,系统会自动补全或提示补全 上下箭头:使用上下箭头可以回溯之前的命令,增加命令的重用,减少输入工作量 !加之前输入过的命令的前几个字母 ...

  2. CAD使用DeleteXData删除数据（网页版）

    主要用到函数说明: MxDrawEntity::DeleteXData 删除扩展数据,详细说明如下: 参数 说明 pzsAppName 删除的扩展数据名称,如果为空,删除所有扩展数据 js代码实现如下 ...

  3. [转]Js获取当前日期时间及其它操作

    转载自:http://www.cnblogs.com/carekee/articles/1678041.html Js获取当前日期时间及其它操作 var myDate = new Date();myD ...

  4. 00The C Programming Language

    The C Programming Language C语言是一门面向过程.抽象化的通用程序设计语言,广泛应用于底层开发.C语言能以简易的方式编译.处理低级存储器.C语言是仅产生少量的机器语言以及不需 ...

  5. LINUX-磁盘空间

    df -h 显示已经挂载的分区列表 ls -lSr |more 以尺寸大小排列文件和目录 du -sh dir1 估算目录 'dir1' 已经使用的磁盘空间' du -sk * | sort -rn ...

  6. day21 01 包的初识

    day21 01包的初识 包:把解决一类问题的模块放在同一个文件夹里面-----包(一个包里面通常会含有_init_.py文件(python2里面必须有),但是后面的就没有要求一定要有了) 同样导入的 ...

  7. 1.ARM嵌入式体系结构与接口技术（Cortex-A8版）

    第1章 嵌入式系统基础知识 ---->1.1嵌入式系统的概述 -------->1.1.1嵌入式系统简介 -------->1.1.2嵌入式系统的特点 -------->1.1 ...

  8. saltstack(六) saltstack Job管理

    一,简介 Jid: job id 格式为%Y%m%d%H%M%S%f master在下发指令消息时,会附带上产生的jid,minion在接收到指令开始执行时,会在本地的cachedir(默认是/var ...

  9. 【03】WAMPServer集成环境下载和安装

    WAMPServer集成环境下载和安装1.W:windows,A:Apache,M:MySQL,P:PHP2.下载WAMP开发包网址:www.wampserver.com           3.安装 ...

  10. 使用Mybatis进行连表查询、left join---https://blog.csdn.net/jinzhencs/article/details/51980518

    使用Mybatis进行连表查询.left join https://blog.csdn.net/jinzhencs/article/details/51980518