change css class on click in angularJs

Question

Я пытаюсь изменить класс CSS элемента div при щелчке. Ниже приведен код, который я пытаюсь. 'input-large' должен быть активным по умолчанию. «input-large input-active» должен активироваться при нажатии на имя пользователя и становится неактивным при нажатии в другом месте.

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

Пожалуйста, дайте мне знать, как изменить DIVs по щелчку

Answer 1

используйте нг кнопкой мыши и нг размытости следовать сниппет в:

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> 

здесь идет ваш 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; 
    } 
} 

пожалуйста, адаптировать его для вашей формы .. его рабочая

Answer 2

другой подход может быть, чтобы добавить класс CSS в обработчике OnClick в контроллере.