代码结合ionic2开发移动端项目，注册页的密码的input一般用password，

但是用户输入密码时可能会输入错误，需要显示成text。

如图：

首先，输入框的类型判断；

 <ion-input type="{{pwshow?'text':'password'}}" placeholder="输入密码"></ion-input>

然后，添加眼睛的点击事件，ngClass判断图标样式；

 <a href="javascript:;"item-end (click)="pwshow=!pwshow" [ngClass]="pwshow?'eyeshow':'eyehide'">
    <ion-icon name="ios-eye-off" color="dark" class="eye-hide"></ion-icon>　　<!--闭眼图标-->
    <ion-icon name="ios-eye" color="dark" class="eye-show"></ion-icon>　　<!--睁眼图标-->
 </a>

最后，附上ngClass的样式，图标的隐藏显示。

 .eyehide .eye-hide, .eyeshow .eye-show{
    display: block;
}
.eyehidee .eye-show, .eyeshow .eye-hide{
    display: none;
}

下面附上效果图啦哈哈。。

初始状态效果图

打开眼睛之后效果图

angularjs2 ng2 密码隐藏显示的更多相关文章

  1. js控制密码的显示与隐藏实例

    原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...

  2. Android文本输入框(EditText)切换密码的显示与隐藏

    package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...

  3. [Android] 怎么在应用中实现密码隐藏？

    [Android] 怎么在应用中实现密码隐藏? 在安卓应用中,用户注册或者登录时,需要把密码隐藏,实现一定的保密效果.在安卓中,可以通过设置EditText组件的TransformationMetho ...

  4. JQuery中隐藏/显示事件函数

    1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...

  5. [转]javascript 快速隐藏/显示万行表格列的方法

    原文地址:javascript 快速隐藏/显示万行表格列的方法 隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...

  6. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  7. 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...

  8. jquery实现密码框显示提示文字

    jquery实现密码框提示文字的功能. 代码:    <html>  <head>   3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...

  9. 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制

    1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...

随机推荐

  1. Linux 江湖系列阶段性总结

    引言 我使用 Linux 已经有很多年了,最开始接触 Linux 的时候是从 RedHat 9(没有 Enterprise),中途换过 N 个不同的发行版.多年前,我在 BlogJava 上面分享 J ...

  2. Android开发之带你轻松集成友盟统计

    友盟统计是什么呢?为什么要集成他呢? 当我们需要获取自己写的软件的装机量和用户使用信息时,这时我们可以集成友盟统计. 首先到友盟统计中注册账号什么的就不废话了,直接看创建项目: 在个人中心中的管理里面 ...

  3. 實際案例: 已知要獲取臨時票証 (JsApi Ticket) 才能調用的接口

    需獲取票証才能調用的接口,簡單列示如下: 一.基礎類 1. wx.checkJsApi (當前客戶端是否支持指定JS) 二.分享類 1.wx.onMenuShareTimeline (分享到朋友圈)2 ...

  4. [Tools] Vim插件管理

    我们在使用插件的时候,都不希望插件安装的很杂乱,它不是一个看不见的黑盒,也为了下次方便在其它地方安装. 由于要方便插件管理,于是有了 Vundle,以下做些介绍: 1. 一个插件管理器, 自己本身也是 ...

  5. &amp;,引用复制@,忽略错误提示

    function &chhua() { static $b="www.jb51.net";//申明一个静态变量 $b=$b."WEB开发"; echo ...

  6. h4和h5的区别

    h4和h5的区别 相关文章 微信ID:WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻[▄ (页底留言开放,欢迎来吐槽) ●●● 1.HTML5为什么只需要写<!DOCTYPEHTML&g ...

  7. 在IT的路上，我在成长

    在IT的路上,我在成长.很荣幸地加入了博客园这个大家庭. 岁月的航船在不断航行,在成长的脚印我要深深留下,回首已往经历,发现自己成长的路上,将来也会有很多美好的回忆,以及丰硕的果实.

  8. runv start container 流程分析

    1.runv/start.go func startContainer(context *cli.Context, container, address string, config *spec.Sp ...

  9. MIM协议与Base64编码

    MIME Protocol 1. MIME的全称是"Multipurpose Internet Mail Extensions",中译为"多用途互联网邮件扩展" ...

  10. [转]qt中文乱码问题

    http://blog.csdn.net/brave_heart_lxl/article/details/7186631#