Question

我在弄清楚为什么我的图像在使用ng-init，ng-mousover和ng-mouseout的ng-repeat中正确渲染时遇到了一些麻烦。

<div ng-repeat="item in product.items">
    <div ng-init="imgsrc='{{item.image01}}'" 
         ng-mouseover="imgsrc='{{item.image02}}'" 
         ng-mouseout="imgsrc='{{item.image01}}'">
        <img ng-src="{{imgsrc}}" />
    </div>
</div>

正确的路径在ng-init，ng-mouseover和ng-mouseout中呈现，但<img>标记仅使用{{item.image01}}和{{item.image02}}进行更新实际的图像路径。

我在这里缺少什么？

Answer 1

删除大括号，以便为ng-init中的不需要的变量赋值。

<div ng-repeat="item in product.items">
    <div ng-init="imgsrc=item.image01" 
         ng-mouseover="imgsrc=item.image02" 
         ng-mouseout="imgsrc=item.image01">
        <img ng-src="{{imgsrc}}" />
    </div>
</div>

Answer 2

可以使用ng-init分配值，但ng-moseouver和ng-mouseout的工作方式相同。

尝试创建一个函数并将其传递给它们：

ng-mouseover="handleMouseover()" 
ng-mouseout="handleMouseout()"

然后相应地更新方法内部变量的值。

角度ng重复，图像悬停不起作用

2 个答案: