作者：Grey

原文地址： http://www.cnblogs.com/greyzeng/p/5554610.html

   
 

 
 

我们先来看一个简单的输入用户名和密码点击登录的界面：

 
 

  • 进入项目目录：cd MyFirstApp
  • 修改主页代码:

    app/pages/home/home.html

    预览一下效果：ionic serve -l

我们有两种方式来获取输入的数据:

 
 

  • 第一种：通过[(ngModel)]来获取参数值，修改home.html的代码为如下形式

    在home.ts增加一个获取用户名和密码并在浏览器的控制台打印出来：

    运行程序：ionic serve -l, 并在用户名和密码框中分别输入相关信息，点击登录按钮，打开浏览器控制台，即可看到获取的信息

  • 第二种方式，采用Form Builder，修改home.html

    在html.ts中，增加如下代码：

    运行：ionic serve -l

    打开Chrome的控制台，可以查看获取的数据：

 
 

 
 

------

上一篇：Ionic2学习笔记（6）：Navigation

下一篇：Ionic2学习笔记（8）：Local Storage& SQLite

Ionic2学习笔记（7）：Input的更多相关文章

  1. Ionic2学习笔记（8）：Local Storage& SQLite

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html              Ionic2可以有两种方式来存储数据,Local S ...

  2. Ionic2学习笔记（6）：Navigation

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5551535.html           Ionic2中创建一个页面很方便,在页面之间相互切换也很方 ...

  3. Ionic2学习笔记（10）：扫描二维码

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016     说明: 在本文发表的时候(2016-06-1 ...

  4. Ionic2学习笔记（9）：访问本地设备

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5559927.html               Ionic2提供了访问本地设备的方法,但是需要安装 ...

  5. Ionic2学习笔记（5）：Provider

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5547646.html             Provider是一种为App提供数据源的方式, 举个 ...

  6. Ionic2学习笔记（0）：HelloWorld

    作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5529153.html 操作系统: Windows 10 环境配置: Node.js Java SE D ...

  7. Ionic2学习笔记（4）：*号

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5544479.html                     大家常常会在ionic2页面中见到*号 ...

  8. Ionic2学习笔记（3）：Pipe

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5538630.html Pipe类似过滤器,比如,在一个字符串要展现在页面之前, 我们需要对这个字符串 ...

  9. Ionic2学习笔记（2）：自定义Component

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5536298.html                     上一篇提到,Ionic2提供了很多Co ...

随机推荐

  1. IDT HOOK思路整理

    IDT(中断描述符表)分为IRQ(真正的硬件中断)和软件中断(又叫异常). HOOK的思路为,替换键盘中断处理的函数地址为自己的函数地址.这样在键盘驱动和过滤驱动之前就可以截获键盘输入. 思路确定之后 ...

  2. ecshop二次开发 商品分类描述编辑框

  3. NEsper Nuget包

    Esper是专门进行复杂事件处理(CEP)的流处理平台,Java版本为Esper,.Net版本为NEsper.Esper & NEsper可以方便开发者快速开发部署处理大容量消息和事件的应用系 ...

  4. 解读ASP.NET 5 & MVC6系列（6）：Middleware详解

    在第1章项目结构分析中,我们提到Startup.cs作为整个程序的入口点,等同于传统的Global.asax文件,即:用于初始化系统级的信息(例如,MVC中的路由配置).本章我们就来一一分析,在这里如 ...

  5. HaProxy配置

    安装 http://www.cnblogs.com/wang1988ming/archive/2012/10/24/2737507.html 配置 global log 127.0.0.1 local ...

  6. 剑指Offer面试题：31.两个链表的第一个公共节点

    一.题目:两个链表的第一个公共节点 题目:输入两个链表,找出它们的第一个公共结点. 链表结点定义如下,这里使用C#语言描述: public class Node { public int key; p ...

  7. 使用VS+VisualGDB编译Linux版本RCF

    RPC通信框架--RCF介绍中说了,RCF本身是支持跨平台的,其代码放到Linux平台,是可以通过gcc.make等工具,编译通过的. 官方提供的源码中,只有cmake编译脚本,并没有提供Makefi ...

  8. Ajax_05之跨域请求

    1.跨域请求: Cross Domain Request:跨域名的HTTP请求,浏览器从某个域名下的资源访问了另一域名下的另一资源(协议.域名或是端口号不同): ①浏览器允许跨域请求的情形:  < ...

  9. Uiautomator 2.0之Until类学习小记

    1. 状态条件-Uiobject2Condtion 1.1 一个UiObject2Condition代表UiObject2满足某个条件的特定状态,主要用于获取到组件释放处于某种状态. 1.2 简单示例 ...

  10. C#设计模式系列：单一职责原则（Single Responsibility Principle）

    1.单一职责原则的核心思想 一个类应该有且只有一个变化的原因. 2.为什么要引入单一职责原则 单一职责原则将不同的职责分离到单独的类,每一个职责都是一个变化的中心.当需求变化时,这个变化将通过更改职责 ...