Angular ng-repeat画像ホバーが動作しない

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-マウスオーバーおよびNG-マウスアウトの内部を描画しているが、<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()" 

は、それに応じた方法の内のあなたの変数の値を更新します。