Angularjs Override ng-show ng-hide on: hover

У меня есть серия "значков", которые я показываю в своем шаблоне.

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

У меня есть следующий css для отображения span когда .icon и скрывает i.

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

Тем не менее, я также хочу показать каждый экземпляр span когда $scope.options == true. Поэтому я добавил следующее:

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

Но теперь мой :hover сломано и не заканчивается показом span.

Есть ли способ переопределить ng-show чтобы мой css все равно display:block когда он зависает?

Ответ 1

plunker

Вы можете пропустить css и разрешить его угловой манипулятор с помощью ng-mouseenter/ng-mouseleave. Затем используйте or чтобы показать, когда вторая переменная вернется.

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

Ответ 2

используйте значение $scope.options чтобы добавить класс в ваш .icon div, затем создайте более определенное правило CSS, чтобы переопределить событие :hover.

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

И в вашем CSS:

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