angularJsのクリック時にCSSクラスを変更

Question

クリック時にdiv要素のCSSクラスを変更しようとしています。以下は私が試しているコードです。 'input-large'はデフォルトで有効になっているはずです。 'input-large input-active'はユーザー名をクリックするとアクティブになり、他の場所をクリックすると非アクティブになります。私はクリックでdivを変更する方法を教えてください

<div class="input-large"> 
 
    <label class="input-label">Username</label> 
 
    <input class="input-field" type="text"> 
 
</div> 
 

 
<div class="input-large input-active"> 
 
      <label class="input-label">Username</label> 
 
      <input class="input-field" type="text"> 
 
</div>

Answer 1

使用してくださいNGクリックして、NG-ぼかし はでスニペットは、次のとおり

http://jsfiddle.net/atXAC/11/

<div ng-controller="MyCtrl"> 

<div ng-class="{'active':hasFocus==true,'inactive':hasFocus==false}">Enter your Name here</div> 
<input type="text" ng-model="user.name" ng-click="hasFocus=true" ng-customblur="onBlur()" required id="name"/> 

</div> 

はここ

var myApp = angular.module('myApp', []); 

myApp.directive('ngCustomblur', ['$parse', function($parse) { 
    return function(scope, element, attr) { 
    var fn = $parse(attr['ngCustomblur']);  
    element.bind('blur', function(event) {   
     scope.$apply(function() { 
     fn(scope, {$event:event}); 
     }); 
    }); 
    } 
}]); 

function MyCtrl($scope) { 
    $scope.onBlur = function(){   
     $scope.hasFocus = false; 
    } 
} 

その作業

Answer 2

別のアプローチは、あなたのコントローラでのonClickハンドラ内でのCSSクラスを追加することができます..あなたのフォームのためにそれを適応してください、あなたのjsを行きます。