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

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;
}

下面附上效果图啦哈哈。。

初始状态效果图

打开眼睛之后效果图

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

赞 (0)

相关推荐

  • AngularJS前端页面操作之用户修改密码功能示例

    本文实例讲述了AngularJS前端页面操作之用户修改密码功能.分享给大家供大家参考,具体如下: 最近在做前端设计,主要使用的知识有AngularJS和nodejs来进行页面显示和数据请求.处理等工作.在设计页面比如忘记密码时,发现一个有效的设计思路是很重要的. 就以修改密码为例,要将提示信息友好的展示给用户,明确告诉用户在操作的过程中那部分有问题,这需要定义详细的变量以及能在页面的不同位置显示信息.下面的代码是自己写的一个简单例子,记录学习进程. changePwd var app = ang

  • AngularJs验证重复密码的方法(两种)

    本文给大家分享angularjs验证重复密码的两种方法.具体方法详情如下所示: 第一种: <label for="password">密码</label> <input id="password" name="password" type="password" ng-model="user.password" required> <label for="r

  • Angularjs修改密码的实例代码

    修改密码逻辑思维 首先要输入旧的密码,判断旧的密码是否正确(后台判断) 其次输入新的密码,判断新密码格式(可增加) 最后判断新密码和确认密码输入是否一致 html部分 <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label"><i c

  • angularjs 表单密码验证自定义指令实现代码

    html代码 <form name="form"> <input type="password" name="password" ng-model="password" required placeholder="请输入密码"> <input type="password" name="passwordConfirm" ng-model=

  • angularjs2 ng2 密码隐藏显示的实例代码

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

    angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目,注册页的密码的input一般用password,但是用户输入密码时可能会输入错误,需要显示成text. 如图: 首先,输入框的类型判断: <ion-input type="{{pwshow?'text':'password'}}" placeholder="输入密码"></ion-input> 然后,添加眼睛的点击事件,ngClass判断图标样式: <a hr

  • vue.js 左侧二级菜单显示与隐藏切换的实例代码

    废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type

  • Vue.js 点击按钮显示/隐藏内容的实例代码

    实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

  • python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码

    python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码

    在使用Matplotlib画图过程中,有些内容必须鼠标点击或者划过才可以显示,这个问题可以依赖于annotate(s='str' ,xy=(x,y) ,xytext=(l1,l2) ,..)这个函数,其中s 为注释文本内容 , xy 为被注释的坐标点, xytext 为注释文字的坐标位置,其他参数可自行百度哈.当鼠标滑过时候,将其设置为可见,默认情况下为隐藏.下面是一个小例子: # -*- coding: UTF-8 -*- import matplotlib.pyplot as plt fig

  • Angularjs2不同组件间的通信实例代码

    AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值 /** *1.定义一个服务,作为传递参数的媒介 */ @Injectable() export class PrepService{ //定义一个属性,作为组件之间的传递参数,也可以是一个对象或方法 profileInfo: any; } /** *2.传递参数的组件,我这边简单演示,直接就在构

  • el-input 标签中密码的显示和隐藏功能的实例代码

    效果展示: 密码隐藏: 密码显示: 代码展示: 一:<el-input>标签代码 <el-form-item label="密码" prop="password"> <el-input :type="passw" v-model="adduser.password" style="width: 300px;" > <%-- input中加图标必须要有slot=&qu

  • 微信小程序 MD5加密登录密码详解及实例代码

    微信小程序 MD5加密登录密码详解及实例代码

    微信小程序 MD5加密 在小程序中,页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件.zepto/jquery 也无法使用,因为zepto/jquery 会使用到window对象和document对象.所以在微信小程序中不能使用jquery.md5.js对密码进行加密.下面我提供一种MD5.js加密实例,本实例先静态演示,后面再到小程序中演示. md5.js程序如下: /* * A JavaScript impl

  • js实现点击展开隐藏效果（实例代码）

    js实现点击展开隐藏效果（实例代码）

    本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果图: 代码实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件冒泡-提示框</title> </head> <style> button { width: 160px; h

  • Android 自定义输入支付密码的软键盘实例代码

    Android 自定义输入支付密码的软键盘实例代码

    Android 自定义输入支付密码的软键盘 有项目需求需要做一个密码锁功能,还有自己的软键盘,类似与支付宝那种,这里是整理的资料,大家可以看下,如有错误,欢迎留言指正 需求:要实现类似支付宝的输入支付密码的功能,效果图如下: 软键盘效果图 使用 android.inputmethodservice.KeyboardView 这个类自定义软键盘 软键盘的实现 1. 自定义只输入数字的软键盘 PasswordKeyboardView 类,继承自 android.inputmethodservice.

  • PyQt5实现仿QQ贴边隐藏功能的实例代码

    此程序大致功能为:可变换颜色,贴边隐藏. 变换颜色思路 QPalette( [ˈpælət] 调色板)类相当于对话框或控件的调色板,它管理着控件或窗体的所有颜色信息,每个窗体或控件都包含一个QPalette对象,在显示时按照它的QPalette对象中对各部分各状态下的颜色的描述来进行绘制. 实现代码 def Painting(self): color = random.choice(["CCFFFF","CC6699","CC99FF",&quo

随机推荐