在Angularjs中的鼠標懸停上彈出一個div

我是AngularJS中的新成員，我如何使用AngularJS在mouseover上彈出一個div。如果我調整鼠標懸停div，它會改變整個結構，如何顯示彈出div而不會干擾鄰居元素。在Angularjs中的鼠標懸停上彈出一個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/>

我增加額外的事情標記一樣的公司，規模上mouseover。幫我彈出mouseover上的圖像。在此先感謝

來源

2015-05-29 Samyak Jain

使用角度UI引導HTTPS的：//angular-ui.github.io/bootstrap/看看這個plunkr http://plnkr.co/edit/a165oiq4bgmVtFvJebTG?p=preview –

@TheWarlock然後他應該在他的問題中提到......可能他不會，沒有任何關於此功能的想法 –

@samyak - 你可能想要嘗試基於自定義屬性的指令 - https://docs.angularjs.org/guide/directive或者你可以簡單地添加使用事件綁定和方法的組合添加到你的範圍就像這一個 - http://stackoverflow.com/questions/22532656/NG-鼠標懸停和休假到肘節項-使用鼠標功能於angularjs –

你必須做兩件事。首先，你必須絕對定位你的popover元素，以便它在彈出時不會干擾其他元素的流動。像這樣的東西（的z-index是什麼使得它成爲了其他元素）：

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

而在你的HTML標記，你可以使用NG-鼠標懸停指令。

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

你的角度控制器可能會是這個樣子

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

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

如果你有一個以上的，你可能會更好把所有的東西變成一個指令

來源

2015-05-29 06:16:01 dom

在Angularjs中的鼠標懸停上彈出一個div

回答

相關問題