AngularJS - Dynamic CSS Value

Question

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>

mikwat · Accepted Answer · 2017-05-02 21:41:49Z

2

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>

edited May 2, 2017 at 21:41

answered May 2, 2017 at 4:07

mikwat

5333 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hadi · Accepted Answer · 2017-05-02 04:25:39Z

1

You should use ng-style like this

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

edited May 2, 2017 at 4:25

answered May 2, 2017 at 4:08

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Collectives™ on Stack Overflow

AngularJS - Dynamic CSS Value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related