使用 ng-repeat 将鼠标悬停在表格中的文本上时显示图像答案

【问题标题】：Display image when hover over text in table using ng-repeat使用 ng-repeat 将鼠标悬停在表格中的文本上时显示图像
【发布时间】：2017-08-07 01:03:43
【问题描述】：

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

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

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

HTML 代码

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

查询代码

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

    $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"    
    }
    ]

【问题讨论】：

标签： jquery angularjs hover mouseover jquery-hover

【解决方案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 事件

【讨论】：

【解决方案2】：

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

编辑 HTML：

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

    });
})();

【讨论】：