CODEWITHSUNDEEP
javascriptangularjs
Daniel
Daniel

Reputation: 1466

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/

Upvotes: 1

Views: 59

Answers (3)

Yosvel Quintero
Yosvel Quintero

Reputation: 19090

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>

Upvotes: 2

stars_point
stars_point

Reputation: 106

This is another method you can take into consider too. This is suitable for simple style changing. It is suggested to create function to modified multiple styles, if you have more complicated cases.

.loginForm {
  height: 140px;
  width: 150px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<section class="loginForm" ng-app="LoginForm" 
ng-controller="mainController" ng-style="modified&&{'height':'500px'}">
  <button ng-click="modified=true">
    Click me
  </button>
</section>

<script>
  var app = angular.module('LoginForm', []);
app.controller('mainController',[function(){}]);
</script>

Upvotes: 1

imv_90
imv_90

Reputation: 145

define two style properties as follow : 

<style>
.loginFormInitialStyle{
   height:140px;
   width:150px;
   background-color:blue;
}
.loginFormChangeStyle{
   height:500px;
   width:150px;
   background-color:blue;
}
</style>

then use ng-class instead of class as follow

<div ng-class="loginForm"></div>

then define $scope.loginForm object with two properties loginFormInitialStyle and loginFormChangeStyle with default values.

$scope.loginForm = {"loginFormInitialStyle":true, loginFormChangeStyle:false}

then in your on-click function just change the values of loginFormObject

$scope.onClick = function(){
   $scope.loginForm = {"loginFormInitialStyle":false, loginFormChangeStyle:true}
}

Upvotes: 0

Related Questions