Angularjs Geçersiz kılma ng-show on: hover

Question

Şablonumda gösterdiğim bir dizi "simge" var.

<div ng-repeat="data in items | orderBy:'-timestamp'"> 
    <div class="icon"> 
     <i>1</i> 
     <span>2</span> 
    </div> 
</div> 

Ben göstermek için aşağıdaki css var span.icon üzerinde süpürdü ve i gizlemek zaman.

.icon:hover i { display: none; } 
.icon:hover span { display: block; } 

Ancak, ben de span$scope.options == true her defasında teker teker göstermeye muktedir olmak istiyorum.

<i ng-hide="options">1</i> 
<span ng-show="options">2</span> 

Ama şimdi, benim :hover kırıldı ve span gösteren yukarıya bitmiyor: Ben şu ekledi.

ng-show'u geçersiz kılmanın bir yolu var mı?

Answer 1

plunker

Sen css atlayıp onu ng-MouseEnter/ng-MouseLeave kullanarak açısal kolu sağlayabilirsiniz. Sonra ikinci bir değişken doğru olduğunda göstermesi için or kullanın.

HTML: etrafında

<div ng-repeat="data in items | orderBy:'-timestamp'"> 
    <div ng-mouseenter="options=true" ng-mouseleave="options=false" class="icon"> 
     <i ng-hide="options || checkbox">1</i> 
     <span ng-show="options || checkbox">2</span> 
    </div> 

</div> 
<input type='checkbox' ng-model="checkbox" ng-click="options=!options">Show 

Answer 2

, sizin .icon div için bir sınıf eklemek sonra :hover olayı geçersiz kılabilir için daha özel bir CSS kuralı yapmak için $scope.options değeri kullanın.

<div class="icon" ng-class="{ override: $scope.options == true }"> 
    <i ng-hide="options">1</i> 
    <span ng-show="options">2</span> 
</div> 

Ve CSS'nizde

:

.icon.override:hover i { display: block; } 
.icon.override:hover span { display: block; }