2016-04-14 72 views
0

我是新的角度js,我試圖在我的登錄頁面添加一些動畫。

我寫了一個控制器,它會改變點擊和模糊時輸入字段的類。

app.controller("con", function($scope,$rootScope,$http,$location){ 
    $scope.OnClick = function(event){ 
     $scope.username1 = "active"; 
     $scope.password1 = "active"; 
     }; 

    $scope.OnBlurUserName = function(event){ 
     if(this.username) 
      $scope.username1 = "active"; 
     else{ 
      $scope.username1 = "input"; 
     } 
     }; 
     $scope.OnBlurPassword = function(event){ 
      if(this.password) 
       $scope.password1 = "active"; 
      else{ 
       $scope.password1 = "input"; 
      } 
      }; 
}); 


     <div class = "input" ng-class="username1" ng-controller="con"> 
     <label class="label">Username</label> 
     <input class="field" name="username" type="text" ng-model="username" 
     ng-click="OnClick()" ng-blur="OnBlurUserName(username)" required> 

     <div class="input" ng-class="password1" ng-controller="con"> 
     <label class="label">Password</label> 
     <input name="password" class="field" type="password" ng- model="password" 
     ng-click="OnClick()" ng-touched="OnClick()" ng-blur="OnBlurPassword(password)" required> 

發生了什麼是點擊用戶名和密碼正在改變班級。但是,如果我在用戶名中輸入某些內容並按下Tab按鈕並在密碼中輸入內容,則該類不會被更改。

我該如何檢查用戶是否已經開始輸入輸入並應用我在點擊時應用的相同類?

在此先感謝!

回答

0

我通過添加ng-focus和ng-click來修復它。