change Klasse bei Klick in angularJs ändern

Question

Ich versuche, die CSS-Klasse eines div-Elements auf Klick zu ändern. Unten ist der Code, den ich versuche. 'input-large' sollte standardmäßig aktiviert sein. 'input-large input-active' sollte aktiv werden, wenn Sie auf Benutzername klicken und wird inaktiv, wenn Sie irgendwo anders klicken.

<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>

mir bitte mitteilen, wie die DIVs auf Klick ändern

Answer 1

bitte verwenden ng klicken und ng-Blur folgen das Snippet in:

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> 

hier geht Ihre js

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; 
    } 
} 

bitte es für Ihre Form anpassen .. seine Arbeits

Answer 2

ein anderer Ansatz kann die CSS-Klasse in onClick-Handler in Ihrem Controller sein anhängen.