[英]Angularjs changing class on mouseenter (hover)
I have the following ng-repeat that displays a star whether or not item.default
is equal to true 我有以下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>
I am using fontawesome and I wanted to do the following: 我正在使用fontawesome ,因此我想执行以下操作:
item.default == false
, I wanted to remove the fa-star-o class and replace it with fa-star on a mouse hover (aka a full star if you are familiar with fontawesome). item.default == false
,我想删除fa-star-o类,并在鼠标悬停时将其替换为fa-star (如果您熟悉fontawesome,也可以是全明星)。 item.default == true
, don't do anything. item.default == true
,则不执行任何操作。 I'm knew to angular so I'm not quite sur how to accomplish this. 我知道有角度,所以我不太了解如何完成此操作。 I know I could usually create a
$scope
variable but since these are multiple items we are talking about, not sure how this can be done. 我知道我通常可以创建一个
$scope
变量,但是由于这些是我们正在讨论的多个项目,因此不确定如何做到这一点。
Any help or guidance is appreciated. 任何帮助或指导表示赞赏。
You can use ng-mouseenter
, ng-mouseleave
directives. 您可以使用
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>
Since you are inside ng-repeat you could as well do: 由于您处于ng-repeat之内,因此您也可以这样做:
<i class="fa"
ng-class="{true:'fa-star' ,false: 'fa-star-o'}[hovered]"
ng-mouseenter="hovered=true"
ng-mouseleave="hovered=false"></i>
With this you dont attach the property hovered
on the item
object instead on the child scope of ng-repeat
, and for default state you could add the class fa-star-o
on the element as well. 这样,您就不
hovered
的属性附加到ng-repeat
的子作用域上,而是附加在item
对象上,并且对于默认状态,您还可以在元素上添加fa-star-o
类。 If you want to make the behavior default always (when a property on the item is set to true) you could just do: 如果您想始终将行为设为默认行为(当项目的属性设置为true时),您可以这样做:
ng-class="{true:'fa-star' ,false: 'fa-star-o'}[hovered||item.default]"
You could also try this way: 您也可以这样尝试:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.