<!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. centos7服务器安装fail2ban配合Firewalld防护墙防止SSH爆破与防护网站CC攻击

    centos7服务器安装fail2ban配合Firewalld防护墙防止SSH爆破与防护网站CC攻击 1.检查firewalld是否启用 #如果您已经安装iptables建议先关闭 service i ...

  2. 梦想MxWeb3D协同设计平台 2019.01.24更新

    SDK开发包下载地址:http://www.mxdraw.com/ndetail_10124.html1.  编写快速入门教程2.  重构前端代码,支持一个页面多个三维控件同时加载,或二维和三维同时加 ...

  3. 我的MYSQL学习心得链接

    http://www.cnblogs.com/lyhabc/p/3793524.html

  4. 题解 [USACO18DEC]Balance Beam

    被概率冲昏的头脑~~~ 我们先将样例在图上画下来: 会发现,最大收益是: 看出什么了吗? 这不就是凸包吗? 跑一遍凸包就好了呀,这些点中,如果i号点是凸包上的点,那么它的ans就是自己(第二个点),不 ...

  5. IntelliJ IDEA 环境设置——侧栏显示类中所有方法

    myeclipse默认会在右侧栏显示类的所有方法框,但是IDEA里并没有这样的初始化设置 那么怎样显示这个功能? 1.点击工具栏View-->Tool Windows-->Structur ...

  6. 数据结构---链表ADT C++实现

    最近在学习数据结构,刚开始一直在看书,但是总是感觉似懂非懂,心想还不如自己操练一波,势必有所收获.现将实现代码发表此地,以备日后复习,若有错误或者建议,欢迎告知本人! 1. 节点类 class Nod ...

  7. Idea+maven+testng+reportng生成测试报告

    TestNG自带的测试报告不是很好用,所以一般结合reportng生成美观的测试报告. 首先,在pom.xml中添加testng和reportng相关依赖 <dependencies> & ...

  8. vcenter6.5安装问题

    vcenter6.5 有2个安装包1个vim (windows系统)   1个vcsa(linux) 安装vcsa遇到如下问题: 1.版本bug 网上一般找到的镜像是VMware-VCSA-all-6 ...

  9. 调试LM1117电压转换芯片

    LM1117(不是LM117)电源芯片是低压差线性稳压器,简称LDO(low dropout regulator),是一种非隔离(输入输出电压的地是一个地)的电压转换芯片.因此,在使用的时候,尽量让输 ...

  10. Spring常用注解总结 hibernate注解

    1.@Resource和@Autowired @Resource和@Autowired功能一样在容器查找匹配的Bean @Autowired默认按照byType方式进行bean匹配,@Resource ...