作者：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. weblogic 12c web部署注意的问题

    废话不多说下面讲介绍他的具体部署web应用,应该注意哪些问题. 准备工作: Java JDK 安装及环境配置 http://jingyan.baidu.com/article/ff41162596a7 ...

  2. ant 自动化编译

    bulid.xml配置: <?xml version="1.0" encoding="UTF-8" ?> <project name=&quo ...

  3. CocoaPods pod install

    加参数可以提升更新的速度 方法1: pod install --verbose --no-repo-update pod update --verbose --no-repo-update 方法2: ...

  4. 解读2015年互联网UGC内容发展态势，安全事件频发

    <2015内容安全年报> 阿里移动安全 第一章 2015年内容安全形势 随着互联网业务的迅速发展,互联网上的信息内容带来了爆炸式的增长.由于缺乏对网络活动进行有效监督和管理的措施,致使互联 ...

  5. 【安装PHP】如何在openSUSE42.1下编译安装PHP7

    首先推荐一篇文章PHP 7 Release Date Arrived: Will Developers Adopt PHP 7? - PHP Classes blog. 里面说到是否会去使用PHP7, ...

  6. Python黑帽编程 3.3 MAC洪水攻击

    Python灰帽编程 3.3 MAC洪水 传统的交换机(我只对我目前使用的交互机做过测试,按照常识只能这样表述)在数据转发过程中依靠对CAM表的查询来确定正确的转发接口,一旦在查询过程中无法找到相关目 ...

  7. [.net 面向对象程序设计进阶] (15) 缓存(Cache)(二) 利用缓存提升程序性能

    [.net 面向对象程序设计进阶] (15) 缓存(Cache)(二) 利用缓存提升程序性能 本节导读: 上节说了缓存是以空间来换取时间的技术,介绍了客户端缓存和两种常用服务器缓布,本节主要介绍一种. ...

  8. SQL Server 备份迁移策略

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/xp_cmdshell/备份压缩 概述 当备份空间不是很充裕的情况下需要找方法将备份文件拷贝到专用的备份机器上去,特别是存储空间不 ...

  9. 自定义view(二)

    1.View 的绘制 通过继承View 并重写它的onDraw()来完成绘制. onDraw()有一个参数,就是Canvas对象.使用这个Canvas就可以绘制图像了,Canvas canvas = ...

  10. 对Big Table进行全表更新，导致 Replication 同步数据的过程十分缓慢

    在Publisher database中更新一个big table,数据行数是3.4亿多.由于没有更新 clustered Index key,因此,只产生了3.4亿多个Update Commands ...