在 AngularJS 1.6 中悬停时在 md-select/md-options 上显示图像/背景 [英] Show image / background on md-select / md-options on hover in AngularJS 1.6

问题描述

我正在尝试将鼠标悬停在 AngularJS 材料 md-select 下拉列表中，在悬停时它会在 div/ 中显示旁边的图像跨度.我正在统一以下代码，但仍然没有出现:

<md-option ng-value="选项"ng-mouseenter="显示 = 真"ng-mouseleave="show = false"ng-repeat="map in mapping.values"ng-selected="$first">{{maping.options[$index]}}</md-option><span ng-show="show"><img src="{{mapping.image[$index]}}"align-"right" width="60px"高度=40像素"垂直对齐=顶部"/></span></md-选择>

并在应用程序中使用以下内容:

scope.shopw = false;

我们可以在悬停时使用手表吗?有如下内容，http://plnkr.co/edit/j5LBYQCXvN9LhXt25tTb?p=preview

解决方案

您可以像我为您所做的那样编写自己的指令来实现这一点.请查看此可运行的小提琴演示.

查看:

<div layout-gt-sm="row" layout="column" layout-margin><main flex-md="60" flex-order-gt-sm="2"><h1 class="md-title">主要内容<div layout="row" layout-xs="column"><div flex="60"><md-select ng-model="mapping.value"><md-option ng-value="map.name"ng-repeat="map in mapping.values"ng-selected="$first"容器镜像类=图像容器"image="map.image">{{map.name}}</md-option></md-选择>

</main>

CSS

._md {溢出:可见；}.preview-image {位置:绝对；高度:100px；宽度:100px；右:-140px；}

应用:

var myApp = angular.module('sandbox', ['ngMaterial']);myApp.controller('myCtrl', function($scope) {$scope.mapping = {值:空，值: [ {姓名:1"，图片:http://placehold.it/100x100"}, {姓名:2"，图片:http://placehold.it/100x100"}, {名称:3"，图片:http://placehold.it/100x100"},]}});myApp.directive('containerImage', function($compile) {返回 {限制:'A'，范围: {图片:="},链接:函数(范围、元素、属性){element.on('鼠标悬停', 函数 (e) {if (element.find("img").length === 0) {var imageElement = angular.element('<img class="preview-image" src="'+ scope.image +'" height="100" width="100"/>');element.append(imageElement);$compile(imageElement)(scope);} 别的 {element.find("img").attr('style', 'display:block');}});element.on('click', function (e) {element.find("img").attr('style', 'display:none');});element.on('mouseleave', function (e) {element.find("img").attr('style', 'display:none');});}}});

I'm trying to put a hover on AngularJS material md-select dropdown where in on hover it shows a image next to it in a div/span. I'm unising the below code but still it's not coming:

<md-select id="{{mapping.id}}" ng-model="mapping.value">
  <md-option ng-value="option" 
             ng-mouseenter="show = true" 
             ng-mouseleave="show = false" 
             ng-repeat="map in mapping.values" 
             ng-selected="$first">{{maping.options[$index]}}</md-option>
  <span ng-show="show">
      <img src="{{mapping.image[$index]}}" 
           align-"right" width="60px" 
           height="40px" 
           vertical-align="top"/>
  </span>
</md-select>

and using the below in app:

scope.shopw = false;

Can we have a watch on hover? to have something like below, http://plnkr.co/edit/j5LBYQCXvN9LhXt25tTb?p=preview

解决方案

You could achieve that by writing an own directive like I did for you. Please check this runnable fiddle demo.

View:

<div ng-app="sandbox" ng-controller="myCtrl">
  <div layout-gt-sm="row" layout="column" layout-margin>
    <main flex-md="60" flex-order-gt-sm="2">
      <h1 class="md-title">
        Main Content
      </h1>
      <div layout="row" layout-xs="column">
        <div flex="60">
          <md-select ng-model="mapping.value">
            <md-option ng-value="map.name"
                       ng-repeat="map in mapping.values" 
                       ng-selected="$first"
                       container-image
                       class="image-container"
                       image="map.image">{{map.name}}</md-option>
          </md-select>
        </div>
      </div>
    </main>
  </div>
</div>

CSS

._md {
  overflow: visible;
}

.preview-image {
  position: absolute;
  height:100px;
  width:100px;
  right: -140px;
}

Application:

var myApp = angular.module('sandbox', ['ngMaterial']);

myApp.controller('myCtrl', function($scope) {
  $scope.mapping = {
    value: null,
    values: [ {
        name: "1",
        image: "http://placehold.it/100x100"
      }, {
        name: "2",
        image: "http://placehold.it/100x100"
      }, {
        name: "3",
        image: "http://placehold.it/100x100"
      },
    ]
  }
});

myApp.directive('containerImage', function($compile) {
  return {
    restrict: 'A',
    scope: {
      image: "="
    },
    link: function (scope, element, attrs) {

      element.on('mouseover', function (e) {
        if (element.find("img").length === 0) {
          var imageElement = angular.element('<img class="preview-image" src="'+ scope.image +'" height="100" width="100" />');
          element.append(imageElement);
          $compile(imageElement)(scope);
        } else {
          element.find("img").attr('style', 'display:block');
        }
      });

      element.on('click', function (e) {
          element.find("img").attr('style', 'display:none');
      });

      element.on('mouseleave', function (e) {
          element.find("img").attr('style', 'display:none');
      });
    }
  }
});

这篇关于在 AngularJS 1.6 中悬停时在 md-select/md-options 上显示图像/背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！