Display image when hover over text in table using ng-repeat

Question

I'm practicing angularJS building a simple inventory app. I have a table with the list of products, the items are in an array and I'm displaying it in the table using ng-repeat.

I would like to display an image when the user hovers over the description box in the table. When I try my logic on a simple HTML file it works, but it's not working when I try it in my table with the angular app.

Below is a sample of my code, the entire code can be found here 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

You can use basic CSS

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

or you can use ng-mouseover and ng-mouseleave event as well

Answer 2

I would do something along the lines of this...

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

    });
})();