web-dev-qa-db-ja.com

Angularjsでマウスオーバー時にdivをポップアップします

私はAngularJSを初めて使用しますが、AngularJSを使用してmouseoverにdivをポップアップ表示するにはどうすればよいですか。マウスオーバーでdivのサイズを変更すると、構造全体が変更され、隣接する要素を邪魔せずにポップアップdivを表示する方法が変わります。

マークアップ

<div ng-repeat="x in images | filter:test" style="float:left; width:30%"  ng-mouseover="count=1" ng-mouseleave="count=0" >
    <img ng-src="{{x.path}}"
        style="width: 100px; height:100px"><div> {{x.company}}</div>
        <div style="background-color:#E6E6FA;text-align: center;"ng-show="count"> 
            price:{{x.price}}</br>
            size:{{x.size}}</br>

        </div>
        </img>
<div/>

Company、size on mouseoverなどのマークアップに追加のものを追加しました。 mouseoverに画像をポップするのを手伝ってください。前もって感謝します

angularjsangularjs-directivemouseoveronmouseover
6
Samyak Jain

あなたは2つのことをしなければなりません。まず、ポップオーバー要素を絶対位置に配置して、ポップアップ時に他の要素の流れを妨げないようにする必要があります。このようなもの（z-indexは他の要素の上にあるようにするものです）：

.popover {
  position: absolute;
  z-index: 100;
}

また、htmlマークアップでは、ng-mouseoverディレクティブを使用できます。

<div ng-mouseover="showPopover()" ng-mouseleave="hidePopover()">
  more info
</div>
<div class="popover" ng-show="popoverIsVisible">Popover Content</div>

あなたのangularコントローラーはおそらく次のようになります

$scope.showPopover = function() {
  $scope.popoverIsVisible = true; 
};

$scope.hidePopover = function () {
  $scope.popoverIsVisible = false;
};

複数ある場合は、それらすべてをディレクティブに入れる方がよいでしょう。

9
dom