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

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?

have you seen [this](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background)? — Eliran Malka, Feb 28 '14 at 21:39

score 3 · Accepted Answer · answered Feb 28 '14 at 21:32

3

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.

answered Feb 28 '14 at 21:32

kubuntu

2,525
1
22
24

Just to add to this, you will use ngAnimate for the fade out or any other animation behaviors. – Beyers Feb 28 '14 at 21:34
I saw the edit come through immediately after I typed the comment :) – Beyers Feb 28 '14 at 21:37
Brilliant. Thank you. I'm only a few weeks into Angular and it's weird but I love it. – E-Madd Feb 28 '14 at 21:38
@Tim, Angular creates an isolated scope for each of the `folder` items. – kubuntu Feb 28 '14 at 21:44
@ranru, you are correct, deleting my comment so nobody is misled by it. – Tim B Feb 28 '14 at 21:47

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

1 Answers1