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/
-
1jsfiddle.net/vvfnN/216Nagarjuna Reddy– Nagarjuna Reddy2016-10-01 15:21:05 +00:00Commented Oct 1, 2016 at 15:21
-
1You can also use ngClass - docs.angularjs.org/api/ng/directive/ngClassNagarjuna Reddy– Nagarjuna Reddy2016-10-01 15:24:08 +00:00Commented Oct 1, 2016 at 15:24
Add a comment
|
3 Answers
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>
Comments
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>
Comments
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}
}
Comments
