angularjs 2 ng2 비밀번호 숨겨 진 인 스 턴 스 코드

1529 단어 angularjsng비밀 번호
angularjs 2 ng2 암 호 는 디 스 플레이 코드 를 숨 기 고 ionic 2 와 결합 하여 모 바 일 엔 드 프로젝트 를 개발 합 니 다.등록 페이지 의 암 호 는 보통 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;
}
 아래 에 효과 도 를 붙 여 보 겠 습 니 다.하하..
초기 상태 효과 도

눈 을 뜨 면 효과 도

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
자바 스 크 립 트 를 사용 하여 폼 검사 기능 을 진행 합 니 다.
SpringMVC 는 Angular 2 의 예 를 간단하게 통합 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage