我试图在AngularJS中获得一个改变鼠标悬停的图标但是遇到了很大的困难.我的菜单是由Angular解释为HTML的JSON对象生成的.每个菜单项都是自己的对象,具有自己的标题,链接,图标和替代图标.
目前我的HTML是:
<ul ng-controller="MenuCtrl" class="ul">
<li class="profile-li" ng-repeat="item in profileItems" style="white-space:nowrap" width="250px">
<div width="200px">
<a href="{{item.link}}" class="return">
<div ng-init="itemsrc='{{item.icon}}'" ng-mouseover="itemsrc='{{item.alticon}}'" ng-mouseout="itemsrc='{{item.icon}}'" >
<img class="icon2" ng-src="{{itemsrc}}" style="display:inline; float:left;">
</img>
</div>
</a>
<a href="{{item.link}}" class="return">
<span style="display:inline; white-space:nowrap;"><br> {{item.profileItem}}</span>
</a>
</div>
</li>
</ul>
在a中,<div> ng-init将初始图标设置为变量(itemsrc),等效于JSON对象中指定的图标路径.ng-mouseover并ng-mouseout根据JSON值将此变量更改为不同的路径.然后<img>在内部<div>使用这个建立的变量作为它ng-src.
加载页面时,会<div>正确生成值(它们显示存储在JSON对象中的正确路径),但<img src>路径仍以括号({{item.icon}}或{{item.alticon}})表示,而不是实际路径(icon/assessment.png例如),这会导致要打破的形象.
以下是正在解释的JSON对象的示例:`
[
{
"contentItem": "Orders",
"link": "#orders",
"icon": "icon/orders.png",
"alticon": "icon/ordersb.png"
}, …