javascript - Angularjs 在 :hover 上覆盖 ng-show ng-hide

Question

我在模板中显示了一系列“图标”。

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

当 .icon 悬停并隐藏 i 时，我有以下 css 显示 span。

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

但是，我还希望能够在 $scope.options == true 时显示 span 的每个实例。所以我添加了以下内容:

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

但是现在，我的 :hover 坏了，最终没有显示 span。

有没有办法覆盖 ng-show 以便我的 css 在悬停时仍然 display:block？

Answer 1

plunker

您可以跳过 css，让 angular 使用 ng-mouseenter/ng-mouseleave 处理它。然后使用 或 让它在第二个变量变为真时显示。

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