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

Question

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

我想在用户将鼠标悬停在 table 中的描述框上时显示图像。当我在一个简单的 HTML 文件上尝试我的逻辑时它有效，但是当我在我的 table 中使用 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>

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

    $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

我会按照这个...

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

    });
})();

Answer 2

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

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

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

jquery

angularjs

hover

mouseover

jquery-hover