如何在AngularJS中悬停显示图像

image HTML

图片HTML

I want to display above images on hover the below images. but I can't get the idea how to display it why because i am new to angular

我想在悬停下面的图像时显示上面的图像。但我无法理解如何显示它为什么因为我是棱角分明的新手

<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']; ?>" width="200px" height="300px" 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']; ?>" width="100px" height="100px" ng-mouseover="slideImage(<?php echo $row1['id']; ?>)">
    <?php } ?>
    </div>
</div>

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 个解决方案

#1

It's better to output backend data as javascript object, and then act on that object in angular.

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

<div class="col-md-7" ng-controller="slideController">
    <div class="text-center">
      <img ng-repeat='image in images' ng-src="{{image.url}}" width="200px" height="300px" ng-hide="!image.show">
    <hr>
      <img ng-repeat='image in images' ng-src="{{image.url}}" width="100px" height="100px" 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>

Edit: I see you are trying to use the center area as main viewer like a carousel. In this case it is better to assign a variable instead of using ng-repeat.

编辑：我看到你正在尝试使用中心区域作为主要观众像旋转木马。在这种情况下，最好分配变量而不是使用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}}" width="200px" height="300px">
    <hr>
    <img ng-repeat="image in images" ng-src="{{image.url}}" width="100px" height="100px" ng-mouseenter="$parent.mainImage = image">
  </div>
</div>

#1