在專案中常常會用到切換效果，以登入頁的密碼輸入框的密碼顯示隱藏為例：

切換實現如下：

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: 14
 
px;
    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型別。

實現後的效果是：預設是密碼不可見

點選之後，使密碼可見：

程式碼的所在位置如下圖：