CODEWITHSUNDEEP
angularjs
vdegenne
vdegenne

Reputation: 13270

change element's style on ngClick directly in the view

I KNOW this is not really the angular's paradigm but I really need to do the following :

<div ng-click="this.style.opacity=0;">click/hide me</div>

However, this is not recognized, how can I change the opacity with a javascript inline instruction when I click the element (without using ngClass as well !)

Upvotes: 0

Views: 3069

Answers (4)

User2
User2

Reputation: 1293

Do following

Add CSS 

.hide {
    opacity: 0
}

HTML

<div ng-click="myStyle = 'hide'" ng-class="myStyle">click/hide me</div>

Upvotes: 0

messerbill
messerbill

Reputation: 5629

try

<div id="myId" ng-click="setOpacity()">click/hide me</div>

and inside your controller:

$scope.setOpacity = function(){
  document.getElementById("myId").style.opacity = 0; //pure JS
  $('#myId").fadeTo(0,0); //Jquery
}

not tested, but this should do the job. alternatively you can use the following expression:

$scope.setOpacity = function(){
  $('#myId").hide();
}

this also should work.

Upvotes: 0

adamjld
adamjld

Reputation: 310

If you're just wanting to hide the element and never see it again then use this.

<div ng-click="hide = true" ng-hide="hide">click/hide me</div>

Don't forget to set hide to false to begin with...

$scope.hide = false;

Upvotes: 0

Vineet
Vineet

Reputation: 4645

Just Try

<div ng-click="myStyle={'opacity':0}" ng-style="myStyle">click/hide me</div>

Upvotes: 2

Related Questions