<!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. 微信小程序 客服自动回复图片

    产品需求是,在客服对话框里,发送特定的文字,回复我们的二维码: 小城程开发完成后,这个自动回复图片的功能就摆在了眼前.刚开始我们想到的是:在线客服功能的设置里设置好自动回复的图片,但是目前设置不支持自 ...

  2. 初步认识MVC

     一丶路由(One) 自定义路由,静态路由,动态路由,组合路由 routes.MapRoute 二丶Action向View传值的四种方式(ViewData.ViewBag.TempData.Model ...

  3. spring aop 内部调用问题解决

    方法1: 基于 proxy 的 spring aop 带来的内部调用问题可以使用 AopContext.currentProxy() 强转为当前的再调用就可以解决了 例如: 错误用法:public A ...

  4. <MySQL>入门五 视图

    -- 视图 /* 含义:虚拟表,和普通的表一样使用 mysql5.1版本的新特性,是通过表动态生成的数据,只保存了sql的逻辑,不保存查询的结果 应用场景: - 多个地方用到同样的查询结果 - 该查询 ...

  5. MySQL练习题及答案（复习）

    新建一个叫做 review 的数据库,将测试数据脚本导进去.(可以使用Navicat查询功能) /* Navicat MySQL Data Transfer Source Server : DB So ...

  6. vuex----------state的基础用法

    先使用vue cli构建一个自己的vue项目 1.npm i -g vue-cli 2.vue init webpack sell (sell是你的项目名) 3.一路回车(在这个过程中会提示你是否安装 ...

  7. E - Cricket Field

    Description   Once upon a time there was a greedy King who ordered his chief Architect to build a fi ...

  8. JUnit 深入

    Fixture 何谓 Fixture ?它是指在执行一个或者多个测试方法时需要的一系列公共资源或者数据,例如测试环境,测试数据等等.在编写单元测试的过程中,您会发现在大部分的测试方法在进行真正的测试之 ...

  9. 2014年武汉的IT行情好像不太好(续)：20个月过后，再看当时面试过的几个公司--武汉财富基石-崩盘，辣妈萌宝-创业失败，朋友公司转交他人管理

     2014年9月的时候,写过一篇面试的总结性质的文章,"2014年武汉的IT行情好像不太好". 原文地址:blog.csdn.net/fansunion/article/detai ...

  10. [K/3Cloud]屏蔽页签的关闭按钮

    如图,屏蔽企业门户的X关闭按钮. this.View.GetControl<TabControl>("FMainTab").SetItemCloseable(1, fa ...