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的屬性附加到ng-repeat的子作用域上，而是附加在item對象上，並且對於默認狀態，您還可以在元素上添加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>