Daniel Daniel - 2 months ago 8
AngularJS Question

How to change the CSS property of the DOM element with AngularJS

I created a function

validateCode()
and when a user clicks on the button
validateCode()
will trigger.

I want to change the height of the
<div class="loginForm"> </div>
when the button clicks.

I was trying : http://jsfiddle.net/Lvc0u55v/10358/

Answer

Here is a solution using ngClass:

angular
  .module('LoginForm', [])
  .controller('mainController', [function(){
    var self = this;    
    self.validateCode = function(){
      self.setLoginFormModified = true;
  };
}]);
.loginForm {
  height:140px;
  width:150px;
  background-color:blue;
}

.loginFormModified {
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section 
  ng-app="LoginForm"
  ng-controller="mainController as ctrl"
  ng-class="{'loginForm': true, 'loginFormModified': ctrl.setLoginFormModified}">
  
  <button ng-click="ctrl.validateCode()">
    Click me
  </button>
  
</section>