angularjs2 ng2 密碼隱藏顯示代碼結(jié)合ionic2開發(fā)移動端項目，注冊頁的密碼的input一般用password，但是用戶輸入密碼時可能會輸入錯誤，需要顯示成text。
如圖：
首先，輸入框的類型判斷；
<ion-input type="{{pwshow?'text':'password'}}" placeholder="輸入密碼"></ion-input>然后，添加眼睛的點擊事件，ngClass判斷圖標(biāo)樣式；
<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> <!--閉眼圖標(biāo)--> <ion-icon name="ios-eye" color="dark" class="eye-show"></ion-icon> <!--睜眼圖標(biāo)--> </a>
最后，附上ngClass的樣式，圖標(biāo)的隱藏顯示。
.eyehide .eye-hide, .eyeshow .eye-show{ display: block;}.eyehidee .eye-show, .eyeshow .eye-hide{ display: none;}下面附上效果圖啦哈哈。。
初始狀態(tài)效果圖
打開眼睛之后效果圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
