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