Может ли какое-нибудь тело помочь мне с ng-mouseover и ng-mouseleave в angularjs?

Question

У меня есть такой код в моем html:

<div ng-mouseover="show_up()" ng-mouseleave="dont_show_up()" class="contain">
    <img src="image/first_image.jpg">
    <div class="overlay" ng-style="overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>
<div ng-mouseover="show_up()" ng-mouseleave="dont_show_up()" class="contain">
    <img  src="image/second_image.jpg">
    <div class="overlay" ng-style="overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>

, и это мой js код:

$scope.show_up = function () {
       $scope.overlay={
           "height":"100%"
       };
    };
    $scope.dont_show_up = function () {
        $scope.overlay={
            "height":"0"
        };
    }

вот что мне нужно, чтобы это произошло: всякий раз, когда я наводю курсор на свое первое изображение, оно должно добавлять стиль «высота: 100%» к моему первому изображению, а не к обоим! и когда я наведу курсор мыши на второе изображение, оно должно добавить стиль «высота: 100%» ко второму изображению, а не к обоим! как я могу решить эту проблему?

Answer 1

Одно решение передало бы некоторое значение функции show_up() и dont_show_up(), которая идентифицирует изображение, скажем, 1, 2, а затем внутри функции изменила переменную overlay на массив и обновила соответствующий пункт. ng-style="overlay" также необходимо изменить на ng-style="overlays[0]"

- Правка

<div ng-mouseover="show_up(0)" ng-mouseleave="dont_show_up(0)" class="contain">
    <img src="image/first_image.jpg">
    <div class="overlay" ng-style="overlays[0]">
        <a href="#!" class="text">show songs</a>
    </div>
</div>
<div ng-mouseover="show_up(1)" ng-mouseleave="dont_show_up(1)" class="contain">
    <img  src="image/second_image.jpg">
    <div class="overlay" ng-style="overlays[1]">
        <a href="#!" class="text">show songs</a>
    </div>
</div>

$scope.show_up = function (index) {
  $scope.overlays[index] = {
    "height":"100%"
  };
};
$scope.dont_show_up = function (index) {
  $scope.overlays[index] = {
    "height":"0"
  };
}

Хорошо, что становится трудно поддерживать, когда количество изображений увеличивается

Второе решение. Вы можете сохранить все изображения в виде массива объектов и применить директиву ng-repeat к l oop через них.

<div ng-repeat="image in images" ng-mouseover="show_up(image.id)" ng-mouseleave="dont_show_up(image.id)" class="contain">
    <img ng-src="image.src">
    <div class="overlay" ng-style="image.overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>

$scope.show_up = function (id) {
    $scope.images.find(image => image.id === id).overlay = {
      "height":"100%"
    };
  };
$scope.dont_show_up = function (id) {
   $scope.images.find(image => image.id === id).overlay = {
     "height":"0"
   };
  }

Answer 2

Не уверен, что вы пытаетесь достичь, так как вы заявляете, что хотите, чтобы изображение изменялось от 0 до 100% при наведении мыши, но стиль ng применяется к оверлею. Я предполагаю, что вы пытаетесь наложить текст поверх изображения?

В любом случае вам не нужно angular или даже javascript для этого - просто CSS и примените: hover на родительском уровне и стиль на дочерний элемент, и вы можете достичь желаемого результата без затрат на js.

.overlay {
  height: 0;
  overflow: hidden
}

.contain:hover .overlay {
  height: 100%;
}

<div class="contain">
    <img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" height="150">
    <div class="overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>
<div  class="contain">
    <img  src="https://images-na.ssl-images-amazon.com/images/I/61W2FTW9ePL._AC_SL1500_.jpg" height="150">
    <div class="overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>