使用 ng 重复将鼠标悬停在表格中的文本上时显示图像

Question

我正在练习angularJS构建一个简单的库存应用程序。我有一个包含产品列表的表格，项目在一个数组中，我使用 ng-repeat 将其显示在表中。

我想在用户将鼠标悬停在表中的描述框上时显示图像。当我在一个简单的 HTML 文件上尝试我的逻辑时，它可以工作，但当我使用 angular 应用程序在我的表格中尝试它时，它不起作用。

下面是我的代码示例，整个代码可以在这里找到 http://codepen.io/andresq820/pen/LWGKXW

网页代码

                                <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代码

$(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

您可以使用基本的 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;
}

或者您也可以使用ng-mouseover和ng-mouseleave事件

Answer 2

我会做一些类似的事情......

编辑网页：

<div ng-if="displayImage" class="somePositionStyle"><img ng-src="{{currentImageUrl}}"/></div>
<td ng-mouseover="showImage(item.image)" ng-mouseleave="hideImage()">{{item.description}}</td>

编辑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;
        }
    });
})();