angularjs2.x 密码隐藏显示的实例

angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目,注册页的密码的input一般用password,但是用户输入密码时可能会输入错误,需要显示成text。

首先,输入框的类型判断;

 

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

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

 

< a href = "javascript:;" rel = "external nofollow" 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 ;
}

    效果图

       

 

  


想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值