AngularJS在mouseenter上更改类（悬停）

Question

我有以下ng-repeat，无论是否item.default等于true，它都会显示一个星星

<div ng-repeat="item in items">
    <i class="fa" ng-class="item.default == true ? 'fa-star' : 'fa-star-o'"></i>
</div>

我正在使用fontawesome，因此我想执行以下操作：

• 如果为item.default == false，我想删除fa-star-o类，并在鼠标悬停时将其替换为fa-star（如果您熟悉fontawesome，又称全星）。
• 如果为item.default == true，则什么也不要做。

我知道有角度，所以我不太了解如何完成此操作。我知道我通常可以创建一个$scope变量，但是由于这些是我们正在讨论的多个项目，因此不确定如何做到这一点。

任何帮助或指导表示赞赏。

Answer 1

您可以使用ng-mouseenter，ng-mouseleave指令。

<div ng-repeat="item in items">
    <i class="fa" 
         ng-class="{true:'fa-star' ,false: 'fa-star-o'}[item.default]"
         ng-mouseenter="item.default=true"
         ng-mouseleave="item.default=false"></i>
</div>

由于您处于ng-repeat之内，因此您也可以这样做：

<i class="fa" 
             ng-class="{true:'fa-star' ,false: 'fa-star-o'}[hovered]"
             ng-mouseenter="hovered=true"
             ng-mouseleave="hovered=false"></i>

这样，您不必将属性附加在对象hovered上，item而不必附加在的子范围上ng-repeat，并且对于默认状态，您也可以fa-star-o在元素上添加类。如果您想始终将行为设为默认行为（当项目的属性设置为true时），您可以执行以下操作：

ng-class="{true:'fa-star' ,false: 'fa-star-o'}[hovered||item.default]"