Bild anzeigen, wenn Sie den Mauszeiger über den Text in der Tabelle bewegen, indem Sie ng-repeat verwenden

Question

Ich übe angleJS, um eine einfache Inventar-App zu erstellen. Ich habe eine Tabelle mit der Liste der Produkte, die Artikel sind in einem Array und ich zeige es in der Tabelle mit ng-repeat.

Ich möchte ein Bild anzeigen, wenn der Benutzer über das Beschreibungsfeld in der Tabelle schwebt. Wenn ich meine Logik auf einer einfachen HTML-Datei versuche, funktioniert es, aber es funktioniert nicht, wenn ich es in meiner Tabelle mit der eckigen App versuche.

Unten ist ein Beispiel meines Codes kann der gesamte Code hier 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 ARRAY

$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

finden

ich etwas entlang der Linien von dies tun würde ...

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

Sie grundlegende CSS verwenden können

<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; 
} 

oder Sie können 0 verwendenund ng-mouseleave Ereignis auch