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()" 

然後更新相應的方法內您的變量的值。