angularjs2 ng2 密碼隱藏顯示

標籤：span   使用者輸入   表徵圖   bsp   點擊事件   type   ges      angular   

代碼結合ionic2開發移動端項目，註冊頁的密碼的input一般用password，

但是使用者輸入密碼時可能會輸入錯誤，需要顯示成text。

首先，輸入框的類型判斷；

1 <ion-input type="{{pwshow?‘text‘:‘password‘}}" placeholder="輸入密碼"></ion-input>

然後，添加眼睛的點擊事件，ngClass判斷表徵圖樣式；

1 <a href="javascript:;"item-end (click)="pwshow=!pwshow" [ngClass]="pwshow?‘eyeshow‘:‘eyehide‘">2    <ion-icon name="ios-eye-off" color="dark" class="eye-hide"></ion-icon>　　<!--閉眼表徵圖-->3    <ion-icon name="ios-eye" color="dark" class="eye-show"></ion-icon>　　<!--睜眼表徵圖-->4 </a>

最後，附上ngClass的樣式，表徵圖的隱藏顯示。

1 .eyehide .eye-hide, .eyeshow .eye-show{2    display: block;3}4.eyehidee .eye-show, .eyeshow .eye-hide{5    display: none;6}

 下面附上啦哈哈。。

初始狀態

開啟眼睛之後

 

angularjs2 ng2 密碼隱藏顯示