Angular ng-repeat, ng-mouseenter, ng-mouseleave - angularjs

Question

So I've got this repeated element...
<div ng-repeat="folder in user.mediaFolders | orderBy:'id'" class="pull-left media-folder">
<div class="folder-name">{{folder.name}}</div>
<div class="folder-body">
<i class="fa fa-picture-o text-muted"></i>
</div>
<div class="popunder">
<div class="popunder-caret"></div>
<div class="popunder-body">
<i class="fa fa-trash-o pull-left"></i>
<i class="fa fa-cloud-upload pull-right"></i>
</div>
</div>
</div>
The nested div with the popunder class should show when mouseover and hide with mouseout. I would write this in jQuery as so...
$('.media-folder').hover(
function(){
$(this).find('.popunder').show();
return false;
},
function(){
$(this).find('.popunder').fadeOut('fast');
return false;
}
);
How would I do this the Angular way?

Answer 1

You can do it all in the view using ng-show, ng-mouseenter and ng-mouseleave directives.
<div ng-repeat="folder in user.mediaFolders | orderBy:'id'" class="pull-left media-folder" ng-mouseenter="showDiv=!showDiv" ng-mouseleave="showDiv=!showDiv" ng-init="showDiv=false">
<div class="folder-name">{{folder.name}}</div>
<div class="folder-body">
<i class="fa fa-picture-o text-muted"></i>
</div>
<div class="popunder" ng-show="showDiv">
<div class="popunder-caret"></div>
<div class="popunder-body">
<i class="fa fa-trash-o pull-left"></i>
<i class="fa fa-cloud-upload pull-right"></i>
</div>
</div>
</div>
You can then use ngAnimate if you like some animation. Of course, there are other ways of achieving same.