作者：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. Unity学习疑问记录之向量基础

    这里写得非常好了: http://blog.gamerisker.com/archives/347.html

  2. 用javascript实现一个2048游戏

    早就想自己写一个2048游戏了,昨晚闲着没事,终于写了一个 如下图,按方向键开始玩吧. 如果觉得操作不方便,请直接打开链接玩吧: http://gujianbo.1kapp.com/2048/2048 ...

  3. C# Winform中如何让PictureBox的背景透明

    最近做winform程序,其中有个需求:有两个PictureBox完全重叠,上面一个需要透明,不能遮挡下面的,以为设置上面的BackColor为透明色就可以了,结果不行,上网搜了一下,发现对于我这种需 ...

  4. DBImport v3.5 中文版发布：数据库定时同步及文档生成工具（IT人员必备）

    前言: 趁着最近的休息时间,只能多勤快些:多写代码,多更新文章. 因为一旦投入新的工作,估计博客又会恢复到一年才产几篇的状态. 对于DBImport,因为用户的意见,增加了一个亮点功能,让软件B格升为 ...

  5. 深圳电信光纤用户必备：简单破解中兴ZXA10 F460光电猫，实现WIFI和自动拨号功能

    最近搬家,ADSL转成光纤宽带,下载速度非常给力.原来的ADSL路由器派不上用场,电信的安装人员也给开通了wifi功能,只是wifi无法上网,而且拨号一定需要用电脑连网线进行拨号.以前是直接把拨号账户 ...

  6. .NET Core中合并Expression<Func<T,bool>>的正确姿势

    这是在昨天的 .NET Core 迁移中遇到的问题,之前在 .NET Framework 中是这样合并 Expression<Func<T,bool>> 的: public s ...

  7. 当我谈 "加班有罪" 我在谈什么？

    前言 PS. 本文只描述IT行业. 博客园果真人气比较高,我之前准备写个 "领域驱动系列",然后感觉大家不感兴趣,看来用的人不多,所以一直没动力续,但是昨天写了 [加班有罪] (h ...

  8. iOS开发系列--视图切换

    概述 在iOS开发中视图的切换是很频繁的,独立的视图应用在实际开发过程中并不常见,除非你的应用足够简单.在iOS开发中常用的视图切换有三种,今天我们将一一介绍: UITabBarController ...

  9. 解决微信公众号OAuth出现40029(invalid code，不合法的oauth_code)的错误

    关于OAuth 官方教程:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842&token=&la ...

  10. iOS---后台运行机制详解

    一.iOS的“伪后台”程序 首先,先了解一下iOS 中所谓的「后台进程」到底是怎么回事吧? Let me be as clear as I can be: the iOS multitasking b ...