Question

所以我有这个重复的元素......

<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>

使用popout类的嵌套div应该在鼠标悬停时显示并使用mouseout隐藏。我会在jQuery中写这个......

$('.media-folder').hover(
    function(){
        $(this).find('.popunder').show();
        return false;
    },
    function(){
        $(this).find('.popunder').fadeOut('fast');
        return false;
    }
);

我如何以Angular的方式做到这一点？

Answer 1

您可以使用ng-show，ng-mouseenter和ng-mouseleave指令在视图中完成所有操作。

<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>

如果您喜欢某些动画，则可以使用ngAnimate。当然，还有其他方法可以达到目的。

Angular ng-repeat，ng-mouseenter，ng-mouseleave

1 个答案: