angularjs2 ng2 密码隐藏显示

代码结合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 密码隐藏显示的更多相关文章

js控制密码的显示与隐藏实例
原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...
Android文本输入框(EditText)切换密码的显示与隐藏
package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...
[Android] 怎么在应用中实现密码隐藏？
[Android] 怎么在应用中实现密码隐藏? 在安卓应用中,用户注册或者登录时,需要把密码隐藏,实现一定的保密效果.在安卓中,可以通过设置EditText组件的TransformationMetho ...
JQuery中隐藏/显示事件函数
1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...
[转]javascript 快速隐藏/显示万行表格列的方法
原文地址:javascript 快速隐藏/显示万行表格列的方法隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...
JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...
jquery实现密码框显示提示文字
jquery实现密码框提示文字的功能. 代码: <html> <head> 3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...
微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...

随机推荐

Fedora 22中的DNF软件包管理工具
Introduction DNF is the The Fedora Project package manager that is able to query for information abo ...
PagerSlidingTabStrip介绍及使用，让ViewPager更绚丽
转载请注明出处http://blog.csdn.net/harryweasley/article/details/42290595,谢谢. 以前一直想着,ViewPager中间的那个横线怎么跟着屏幕的 ...
DirectX SDK
http://blog.csdn.net/c4501srsy/article/details/17403927 http://blog.csdn.net/yy649487394/article/det ...
Sunny-Code Beta版总结会议
时间:2015-6-12 地点:基教601 参会人员:Sunny-Code全体成员设想和目标我们的软件要解决什么问题?是否定义得很清楚? 我们打算做一款集成小蝴蝶功能.Ip快速修改功能.WiFi共 ...
XMLHttpRequest
XMLHttpRequest对象的方法 abort() 取消当前所发出的请求 getAllResponseHeaders() 取得所有的HTTP头信息 getResponseHeader() 取得一个 ...
练习1-12：编写一个程序，以每行一个单词的形式打印其输入（C程序设计语言第2版）
#include <stdio.h> #define NOT_BLANK 1 #define BLANK 0 main() { int c; int last_ch = NOT_BLANK ...
IOS开发之音频--录音
前言:本篇介绍录音. 关于录音,这里提供更为详细的讲解网址:http://www.cnblogs.com/kenshincui/p/4186022.html#audioRecord ,并且该博客有更 ...
在类库中引用WebService的注意事件
在VS中添加引用服务之后会在类库中生成一个app.config的文件把里面的配置节点添加到web项目中的 web.config中即可.不然会报错误
JavaScript 全局
JavaScript 全局 JavaScript 全局属性和方法可用于创建Javascript对象. JavaScript 全局属性属性描述 Infinity 代表正的无穷大的数值. NaN 指示 ...
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 ≤ ...