[英]Angularjs changing class on mouseenter (hover)
我有以下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
变量,但是由于这些是我们正在讨论的多个项目,因此不确定如何做到这一点。
任何帮助或指导表示赞赏。
您可以使用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]"
您也可以这样尝试:
<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.