在 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屋!