作者：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. 利用结果集元数据将查询结果封装为map

    package it.cast.jdbc; import java.sql.Connection; import java.sql.ParameterMetaData; import java.sql ...

  2. xcodebuild编译ipa

    #!/bin/sh # autoBuild.sh # CTest # # Created by Ethan on 14-11-3. # Copyright (c) 2014年 Ethan. All r ...

  3. GIT常用命令笔记

    最近在做了一个自己的项目.两个人合作的,所以需要用到版本管理工具.本来打算学一下自己搭建svn的,后来朋友推荐我用git,免费,流行,好用,逼格.所以就学习了一下.发现这个git与已经使用惯了的svn ...

  4. Javascript模拟继承（赠送.net吐槽一段）

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  5. 实现 Math.Asin 迈克劳林（泰勒）展开式，结果比Math.Asin 慢一倍

    项目中需要快速求解Asin(x) 的近似值,原以为用泰勒展开式会快一些,结果比原生的慢一倍. Math.ASin        Time Elapsed:   9ms        Gen 0:    ...

  6. Utility2：Appropriate Evaluation Policy

    UCP收集所有Managed Instance的数据的机制,是通过启用各个Managed Instances上的Collection Set:Utility information(位于Managem ...

  7. Transaction Replication6：Transaction cleanup

    distribution中暂存的Transactions和Commands必须及时cleanup,否则,distribution size会一直增长,最终导致数据更新耗时增加,影响replicatio ...

  8. Sql Server系列：数据库操作

    1 创建数据库 1.1 CREATE DATABASE语法 CREATE DATABASE database_name [ ON [ PRIMARY ] <filespec> [ ,... ...

  9. MVC5 网站开发实践 1、建立项目

    目录 MVC5 网站开发实践 概述   一.建立项目 1.建立团队项目 在办公室和家里使用不同的电脑,为了方便代码的共享将项目建立为团队项目.   如图打开vs2013→新建→团队项目(图1),会自动 ...

  10. 深入理解DOM事件类型系列第三篇——变动事件

    × 目录 [1]删除节点 [2]插入节点 [3]特性节点[4]文本节点 前面的话 变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理 ...