CODEWITHSUNDEEP
angularjs
Samudrala Ramu
Samudrala Ramu

Reputation: 2106

Angular js Using with controllers how to change my div as replaced as another div on mouse over on a button?

Angular js Using controllers. How to change my div as replaced as another div on mouseover on a button?

Upvotes: 1

Views: 46

Answers (1)

gyc
gyc

Reputation: 4360

You can use ng-if or ng-show or ng-hide combined with events directives ng-mouseover or ng-mouseenter and ng-mouseleave

function SuperController($scope) {
	$scope.hovered = false;
}

angular.module('myApp', []);
angular
    .module('myApp')
    .controller('SuperController', SuperController)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="SuperController as s">
    <button
      ng-mouseover="hovered=true"
      ng-mouseleave="hovered=false">HOVER ME</button>
    <div ng-if="hovered">Shown only if hovered</div>
    <div ng-if="!hovered">Shown only if not hovered</div>
  </div>
</div>

Upvotes: 1

Related Questions