ionic的切换效果实现——以登录页密码显示隐藏切换为例

在项目中常常会用到切换效果，以登录页的密码输入框的密码显示隐藏为例：

切换实现如下：

css：

password {    background-color: transparent;    display: inline;    padding-top: 0;    padding-bottom: 0;    width: 80%;    height: 27px;    box-sizing: border-box;    padding-left: 5px;    line-height: 27px;    border: 0;    font-size: 14px;    float: right;    border: 1px solid #000;}.eye {    width: 27px;    height: 27px;    display: inline-block;    position: absolute;    right: 0px;    top: 0px;    background: url(../../img/login/eyehide.png) no-repeat center;    background-size: 60%;}.eyehideimage {    background-image: url(../img/eyehide.png);}.eyeshowimage {    background-image: url(../img/eyeshow.png);}

html：

<div style="position: relative;">    <input type="{{eyeshow?'text':'password'}}" name="" id="password" value="" ng-model="user.password" style="padding-right:30px ;" />    <div class="eye" ng-click="eyeshow=!eyeshow" ng-class="eyeshow?'eyeshowimage':'eyehideimage'"></div>

注：代码中的eyeshow=!eyeshow默认的eyeshow的值就是true或者false，以此控制上面input的type类型。

实现后的效果是：默认是密码不可见

点击之后，使密码可见：

代码的所在位置如下图：

完整代码例子的下载地址：
http://download.csdn.net/detail/zuoyiran520081/9842952