Блог

Главная - Вопросы по программированию - Как изменить свойство CSS элемента DOM с помощью AngularJS

Как изменить свойство CSS элемента DOM с помощью AngularJS

#javascript #angularjs

#javascript #angularjs

Вопрос:

Я создал функцию validateCode() , и когда пользователь нажимает на кнопку validateCode() , она срабатывает.

Я хочу изменить высоту <div class="loginForm"> </div> при нажатии кнопки.

Я пытался: http://jsfiddle.net/Lvc0u55v/10358 /

Комментарии:

1. jsfiddle.net/vvfnN/216

2. Вы также можете использовать ngClass — docs.angularjs.org/api/ng/directive/ngClass

Ответ №1:

Вот решение с использованием 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>

Ответ №2:

Это еще один метод, который вы также можете принять во внимание. Это подходит для простого изменения стиля. Предлагается создать функцию для изменения нескольких стилей, если у вас есть более сложные случаи.

 .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="modifiedamp;amp;{'height':'500px'}">
  <button ng-click="modified=true">
    Click me
  </button>
</section>

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

Ответ №3:

определите два свойства стиля следующим образом : 

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

затем используйте ng-class вместо class следующим образом

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

затем определите объект $scope.LoginForm с двумя свойствами loginFormInitialStyle и loginFormChangeStyle со значениями по умолчанию.

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

затем в вашей функции on-click просто измените значения loginFormObject

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