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>