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

Posted 2023-05-08

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

【英文标题】：Display image when hover over text in table using ng-repeat

【发布时间】：2017-08-07 01:03:43

【问题描述】：

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

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

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

HTML 代码

                                <table  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+'"   />'+'</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"    
    
    ]

【参考方案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;
        

    );
)();