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]"

Answer 2

您也可以尝试这种方式：

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

Angularjs在mouseenter上改变类（悬停）

2 个答案: