如何在 AngularJS 中悬停时显示图像

Posted 2023-05-09

【中文标题】如何在 AngularJS 中悬停时显示图像

【英文标题】：How to display images on hover in AngularJS

【发布时间】：2018-03-14 04:59:52

【问题描述】：

image HTML

我想在悬停在下面的图像时显示上面的图像。但我不知道如何显示它，因为我是角度新手

<div class="col-md-7" ng-controller="slideController">
    <div class="text-center">
    <?php 
        $id = $_GET['id'];
        $result1 = mysqli_query($db, "SELECT * FROM product_images WHERE product_id ='$id' ");
        while($row1 = mysqli_fetch_assoc($result1))  ?>
            <img src="../backend/uploads/<?php echo $row1['image']; ?>"   ng-model="id[<?php echo $row1['id']; ?>]" ng-hide="hideImage">
    <?php  ?>
    <hr>
    <?php 
        $id = $_GET['id'];
        $result1 = mysqli_query($db, "SELECT * FROM product_images WHERE product_id ='$id' ");
        while($row1 = mysqli_fetch_assoc($result1))  ?>
            <img src="../backend/uploads/<?php echo $row1['image']; ?>"   ng-mouseover="slideImage(<?php echo $row1['id']; ?>)">
    <?php  ?>
    </div>
</div>

JS

var slide=angular.module("myApp",[])
slide.controller('slideController', function ($scope) 
$scope.id = ;
$scope.hideImage = true;
console.log($scope.id)

$scope.slideImage = function(id) 
    if (id == $scope.id) 
        $scope.hideImage = false;
    

【参考方案1】：

最好将后端数据输出为javascript对象，然后以角度作用于该对象。

<div class="col-md-7" ng-controller="slideController">
    <div class="text-center">
      <img ng-repeat='image in images' ng-src="image.url"   ng-hide="!image.show">
    <hr>
      <img ng-repeat='image in images' ng-src="image.url"   ng-mouseenter="image.show = true" ng-mouseleave="image.show = false">
    </div>
</div>

<script>var images = [
  <?php 
    $id = $_GET['id'];
    $result = mysqli_query($db, "SELECT * FROM product_images WHERE product_id ='$id' ");
      while($row = mysqli_fetch_assoc($result))  ?>
  
    url: "<?php echo $row['image']; ?>",
    id: <?php echo $row['id']; ?>
  ,
  <?php  ?>
]</script>

---

编辑：我看到您正在尝试将中心区域用作主要查看器，就像轮播一样。在这种情况下，最好分配一个变量而不是使用ng-repeat。

angular.module('test', []).controller('slideController', SlideController);

function SlideController($scope) 
  $scope.images = [
     id: 1, url: 'https://cdn.pixabay.com/photo/2015/04/17/09/36/domestic-cat-726989_960_720.jpg' ,
     id: 2, url: 'https://cdn.pixabay.com/photo/2014/12/03/21/20/kittens-555822_960_720.jpg' ,
     id: 3, url: 'https://cdn.pixabay.com/photo/2013/09/29/12/38/cat-188088_960_720.jpg' ,
     id: 4, url: 'https://cdn.pixabay.com/photo/2015/11/15/20/21/cat-1044750_960_720.jpg' ,
  ]
  
  $scope.mainImage = $scope.images[0];

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div class="col-md-7" ng-app="test" ng-controller="slideController">
  <div class="text-center">
    <img ng-src="mainImage.url"  >
    <hr>
    <img ng-repeat="image in images" ng-src="image.url"   ng-mouseenter="$parent.mainImage = image">
  </div>
</div>

【讨论】：

@BhaskararoGummidi 这应该是正确的答案，我要撤回我的答案，因为它不是正确的方法。但也请参考here

@Icycool 我认为加载的数组是无效的，因为数组的对象之间没有逗号，你能改变这个吗，我找到了这个加载到数组中的链接here，谢谢，太好了回答！

@Icycool 数组将在数组的最后一个元素中有一个逗号，可以吗？你能提供角度数组的完整JS吗，它应该是一个范围变量，抱歉答案不完整所以我问这个，第一个元素也应该默认显示

@NarenMurali 是的，我总是在最后一个元素中使用带有逗号的 js 数组来进行版本控制，所以没关系。如果要默认显示第一个元素，可以在控制器中设置$scope.images[0].show = true。

@Icycool 优秀的先生......但是一旦鼠标离开图像，默认图像就会消失。