Angularjs覆盖ng-show ng-hide on:悬停

Question

我在模板中显示了一系列"图标".

<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在它徘徊？

Answer 1

plunker

您可以跳过css并使用ng-mouseenter/ng-mouseleave让角度处理它.然后使用a 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