Afficher l'image lorsque l'on survole le texte d'une table en utilisant ng-repeat

Question

Je pratique angularJS en créant une application d'inventaire simple. J'ai une table avec la liste des produits, les éléments sont dans un tableau et je l'affiche dans la table en utilisant ng-repeat.

Je souhaite afficher une image lorsque l'utilisateur survole la zone de description dans le tableau. Quand j'essaie ma logique sur un simple fichier HTML ça marche, mais ça ne marche pas quand je l'essaye dans ma table avec l'application angulaire.

Voici un exemple de mon code, tout le code se trouve ici http://codepen.io/andresq820/pen/LWGKXW

HTML CODE

       <table width="100%" class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline" id="dataTables-example" role="grid" aria-describedby="dataTables-example_info" style="width: 100%;"> 
           <thead> 
            <tr role="row"> 
             <th style="width: 50px;" ng-click="sortData('index')">Item Number</th> 
             <th class="sorting" style="width: 50px;" ng-click="sortData('code')">Code</th> 
             <th class="sorting" style="width: 250px;" ng-click="sortData('description')">Description</th> 
             <th class="sorting" style="width: 50px;" ng-click="sortData('in')">In</th> 
             <th class="sorting" style="width: 50px;" ng-click="sortData('out')">Out</th> 
             <th class="sorting" style="width: 50px;" ng-click="sortData('total')">Total</th> 
            </tr> 
           </thead> 

           <tbody> 
            <tr class="gradeA odd" role="row" ng-repeat="item in items | limitTo: rowLimit | filter: search | orderBy:sortColumn:reverseSort"> 
             <td class="text-center"> 
              <i class="fa fa-pencil-square-o" aria-hidden="true" ng-click="selectedProduct(item)" 
              data-toggle="modal" data-target="#editItemModal"></i> 
              <i class="fa fa-trash-o" aria-hidden="true" ng-click="deleteProduct(item)"></i>{{1+$index}}</td> 
             <td class="text-center">{{item.code}}</td> 
             <td class="displayImage" data-image="{{item.image}}">{{item.description}}</td> 
             <td class="text-center">{{item.in}}</td> 
             <td class="text-center">{{item.out}}</td> 
             <td class="text-center">{{item.in - item.out}}</td> 
            </tr> 
           </tbody> 
          </table> 

JQUERY CODE

$(document).ready(function(){ 
    $(".displayImage").mouseenter(function(){ 
    var image_name=$(this).data('image'); 
    console.log("We are in jquery"); 
    console.log(image_name); 
    var imageTag='<div style="position:absolute;">'+'<img src="'+image_name+'" alt="image" height="100" />'+'</div>'; 
    $(this).parent('div').append(imageTag); 
}); 
$(".displayImage").mouseleave(function(){ 
    $(this).parent('div').children('div').remove(); 
}); 
}); 

AngularJS MATRICE

$scope.items = [ 
    { 
    code:"FD1", 
    description: "Happy valentines", 
    in: 50, 
    out: 20, 
    createdOn: 1397490980837, 
    modifiedOn: 1397490980837, 
    image: "img/Happy-Valentines.jpg"  
    }, 
    { 
    code:"FD2", 
    description: "Happy Mothers Day", 
    in: 70, 
    out: 20, 
    createdOn: 1397490980837, 
    modifiedOn: 1397490980837, 
    image: "img/Happy-Mothers-Day.jpg"  
    } 
    ] 

Answer 1

je ferais quelque chose le long des lignes de ce ...

EDIT HTML:

<div ng-if="displayImage" class="somePositionStyle"><img ng-src="{{currentImageUrl}}"/></div> 

<td ng-mouseover="showImage(item.image)" ng-mouseleave="hideImage()">{{item.description}}</td> 

EDIT JS:

(function(){ 
    var app = angular.module("inventory", []); 

    app.controller("InventoryCtrl", function($scope){ 

     $scope.displayImage = false; 

     $scope.showImage = function(imageUrl) { 
      $scope.currentImageUrl = imageUrl; 
      $scope.displayImage = true; 
     } 

     $scope.hideImage = function(imageUrl) { 
      $scope.displayImage = false; 
     } 

    }); 
})(); 

Answer 2

Vous pouvez utiliser les CSS de base

<div id="parent"> 
    Some content 
    <div id="hover-content"> 
     Only show this when hovering parent 
    </div> 
</div> 


#hover-content { 
    display:none; 
} 
#parent:hover #hover-content { 
    display:block; 
} 

ou vous pouvez utiliser ng-mouseover et ng-mouseleave événement aussi bien