angularjs -- 密码输入框的内容可见与隐藏（ng-class）

在注册或登录密码输入框右侧会出现一个眼睛的小图标，点击时密码可见或隐藏，这个功能用angularjs的ng-class的属性，很容易就实现了，如下：

1. html代码：

<div class="item item-input">
  <span class="input-label font" >设置密码：</span>
  <input ng-attr-type ="{{inputType}}" placeholder="密码长度6-10之间" class = "font" ng-model = "firstpassword" maxlength="10" >
  <i ng-class="{'icon ion-ios-eye':passwordvisibleFlag,'icon ion-ios-eye-outline':!passwordvisibleFlag}" ng-click="passwordvisible(0)"></i>
</div>
<div class="item item-input">
  <span class="input-label font" >重复密码：</span>
  <input ng-attr-type ="{{inputType1}}" placeholder="密码长度6-10之间" class = "font" ng-model = "secondpassword" maxlength="10">
  <i ng-class="{'icon ion-ios-eye':passwordvisibleFlag1,'icon ion-ios-eye-outline':!passwordvisibleFlag1}" ng-click="passwordvisible(1)"></i>
</div>

2.controller代码：

// 初始化输入框的变量
    $scope.inputType = "text";
    $scope.inputType1 = "text";
    $scope.passwordvisibleFlag = true;
    $scope.passwordvisibleFlag1 = true;
// 显示或隐藏密码
    $scope.passwordvisible = function(index){
      if(index === 0){
        if($scope.passwordvisibleFlag){
          $scope.passwordvisibleFlag = false;
          $scope.inputType = "password";
        }else{
          $scope.passwordvisibleFlag = true;
          $scope.inputType = "text";
        }
      }else{
        if($scope.passwordvisibleFlag1){
          $scope.passwordvisibleFlag1 = false;
          $scope.inputType1 = "password";
        }else{
          $scope.passwordvisibleFlag1 = true;
          $scope.inputType1 = "text";
        }
      }
    };

这里还需要用到ng-attr-type的属性

关于ng-class有三种方法：

（1） 通过数据的双向绑定（不推荐使用）

（2） 通过对象数组

（3） 通过key/value

具体使用方法：

第一种：通过数据双向绑定

function changeClass(){   
    $scope.className = "change2"; 
} 
<div class="{{className}}"></div>

第二种：通过字符串数组的形式来改变

function changeClass(){   
  $scope.className = true/false; 
}   
<div ng-class="{true:'zhende',false:'jiade'}[className]"></div>

这种方法实现其实很好理解，在controller里控制className的值，当其为真取zhende ，当为假是去jiade。

这个只能让元素拥有两个属性，要么为真，要不为假

第三种：通过key/value的方式

function changeClass(){   
  $scope.lala = true;
 }   
<div ng-class="{'selectClass':select,'choiceClass':choice,'haha':lala}"></div>

在controller里控制select、choice、lala这三个值，这三个值可同为真假，所以这个弥补了第二种的方法，个人推荐使用，比较容易控制。