angularjs2 ng2密码隐藏显示示例代码

angularjs2 ng2密码隐藏显示代码与ionic2结合开发移动终端项目。注册页面的密码输入一般使用密码，但用户在输入密码时可能会出错，需要显示为文本。

如图所示：

首先判断输入框的类型；

离子输入类型='{{pwshow？'Text' :' password'}} '占位符='输入密码'/ion-input。然后，添加一个眼睛点击事件，ngClass判断图标样式。

a href=' javascript:'rel='external nofollow '项-end(单击)='pwshow=！pwshow' [ngClass]='pwshow '？eye how ' : ' eye hide ' ' ion-icon name=' IOs-eye-off ' color=' dark ' class=' eye-hide '/ion-icon！-闭上眼睛图标-离子-图标名称=' IOs-eye ' color=' dark ' class=' eye-show '/离子-图标！-睁开眼睛图标-/a最后，附加ngClass样式并隐藏图标。眼罩。藏起眼睛。眼睛秀。eye-show { display : }块；}.眼睛隐藏。眼神交流。眼睛秀。隐藏眼睛{ display: none}下面附上渲染图。

初始状态渲染

睁开眼睛后的效果图

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。