Angularjs Override ng-show ng-hide on: hover

Question

Ho una serie di "icone" che mostro nel mio modello.

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

Ho il seguente CSS per mostrare span quando .icon passa sopra e nascondere i.

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

Tuttavia, ho anche voglia di essere in grado di mostrare ogni singola istanza di span quando $scope.options == true. Così ho aggiunto il seguente:

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

Ma ora, il mio :hover è rotto e non finisce che mostra il span.

C'è un modo per ignorare il ng-show in modo che il mio css sarà ancora display:block quando è al passaggio del mouse?

Answer 1

plunker

Si può saltare il css e lasciare che la maniglia angolare utilizzando ng-mouseenter/ng-mouseLeave. Quindi utilizzare un or per visualizzarlo quando una seconda variabile diventa vera.

HTML:

<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

utilizzare il valore $scope.options per aggiungere una classe al div .icon, quindi creare una regola CSS più specifica per sovrascrivere l'evento :hover.

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

E nel CSS:

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