Anular js 컨트롤러를 사용하여 버튼을 마우스로 클릭 할 때 div를 다른 div로 바꾸는 방법은 무엇입니까?

Question

Anular js 컨트롤러를 사용하여 내 div를 바꾸는 방법을 버튼 위에 마우스를 올려 놓을 때 다른 div로 바 꾸었습니까?

Answer 1

당신은 ng-if 또는 ng-show 또는 ng-hide 이벤트 지침 ng-mouseover 또는 ng-mouseenter 및

function SuperController($scope) { 
 
\t $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>