代码结合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. Fedora 22中的DNF软件包管理工具

    Introduction DNF is the The Fedora Project package manager that is able to query for information abo ...

  2. PagerSlidingTabStrip介绍及使用,让ViewPager更绚丽

    转载请注明出处http://blog.csdn.net/harryweasley/article/details/42290595,谢谢. 以前一直想着,ViewPager中间的那个横线怎么跟着屏幕的 ...

  3. DirectX SDK

    http://blog.csdn.net/c4501srsy/article/details/17403927 http://blog.csdn.net/yy649487394/article/det ...

  4. Sunny-Code Beta版总结会议

    时间:2015-6-12 地点:基教601 参会人员:Sunny-Code全体成员 设想和目标 我们的软件要解决什么问题?是否定义得很清楚? 我们打算做一款集成小蝴蝶功能.Ip快速修改功能.WiFi共 ...

  5. XMLHttpRequest

    XMLHttpRequest对象的方法 abort() 取消当前所发出的请求 getAllResponseHeaders() 取得所有的HTTP头信息 getResponseHeader() 取得一个 ...

  6. 练习1-12:编写一个程序,以每行一个单词的形式打印其输入(C程序设计语言 第2版)

    #include <stdio.h> #define NOT_BLANK 1 #define BLANK 0 main() { int c; int last_ch = NOT_BLANK ...

  7. IOS开发之音频--录音

    前言:本篇介绍录音. 关于录音,这里提供更为详细的讲解网址:http://www.cnblogs.com/kenshincui/p/4186022.html#audioRecord  ,并且该博客有更 ...

  8. 在类库中引用WebService的注意事件

    在VS中 添加引用服务之后 会在 类库中生成一个app.config的文件 把里面的配置节点 添加到web项目中的 web.config中 即可.不然会报 错误  

  9. JavaScript 全局

    JavaScript 全局 JavaScript 全局属性和方法可用于创建Javascript对象. JavaScript 全局属性 属性 描述 Infinity 代表正的无穷大的数值. NaN 指示 ...

  10. UVa 10943 (数学 递推) How do you add?

    将K个不超过N的非负整数加起来,使它们的和为N,一共有多少种方法. 设d(i, j)表示j个不超过i的非负整数之和为i的方法数. d(i, j) = sum{ d(k, j-1) | 0 ≤ k ≤ ...