CODEWITHSUNDEEP
cssangularjs
Michael 'Maik' Ardan
Michael 'Maik' Ardan

Reputation: 4393

AngularJS - Dynamic CSS Value

It seems that numeric values initiated using ng-init works with CSS attribute as seen on the sample using myHeight variable.

However, the variable event doesn't seem to work. Even with the value set to none, the hover effect is still triggered when hovered in the element:

.has-hover {
  background-color: red;
}

.has-hover:hover {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app ng-init="myHeight=100; event=none">
  <div class="has-hover" style="height: {{myHeight}}px; pointer-events: {{event}};" >
  </div>
</div>

Upvotes: 1

Views: 375

Answers (2)

mikwat
mikwat

Reputation: 533

You should use ng-style for this. Also, I think you need to set event equal to the string 'none':

.has-hover {
  background-color: red;
}

.has-hover:hover {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-init="myHeight=100; event='none'">
  <div class="has-hover" ng-style="{ height: myHeight + 'px', 'pointer-events': event }">
  </div>
</div>

Upvotes: 2

Hadi
Hadi

Reputation: 17289

You should use ng-style like this 

ng-style="{'height': myHeight + 'px','pointer-events':event}"

Upvotes: 1

Related Questions