Angular：IE11当使用Multiple Select元素时，使用ng-mouseover选项的ng-repeat无法触发方法 [英] Angular: IE11 When using an Multiple Select element, ng-repeat on options with ng-mouseover fails to trigger method
本文介绍了Angular：IE11当使用Multiple Select元素时，使用ng-mouseover选项的ng-repeat无法触发方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
背景：我想在选择框内显示更多关于选项元素的信息。我计划这样做的方式是将鼠标悬停在一个选项上，并在下面显示有关该选项的更多信息，并且这可行！ ：）
问题：虽然这适用于除IE以外的其他任何浏览器（我在IE11中测试过这个问题），但是，它显示为尽管IE根本不会触发该事件。我在这里尝试了不同的ng- {events}，没有任何东西可以工作。我想知道是否有解决此问题的办法，或者解决此问题的其他方法。我创建了一个问题的例子。一定要在IE11中测试它（这是我需要它在不幸中工作的浏览器）。为什么IE浏览器WHYYY !!!？ ：
注意我正在寻找一个角度解决方案。
<！doctype html>< html lang =en>< head> < meta charset =UTF-8> < title>示例 - example-select-ngrepeat-production< / title> < script src =// code.angularjs.org/snapshot/angular.min.js\">< t; / script> < script src =app.js>< / script> <风格>选择{height：100px; width：200px;}< / style> < / head>< body ng-app =ngrepeatSelect> < div ng-controller =ExampleController> < form name =myForm> < label for =repeatSelect>重复选择：< / label> < select multiple name =repeatSelectid =repeatSelectng-model =data.model> < option ng-repeat =option in data.availableOptionsvalue ={{option.id}}ng-mouseover =data.showExtraInformation（option）ng-mouseout =data.clearExtraInformation（）> {{option.name}}< /选项> < /选择> < /形式> < HR> < tt> model = {{data.model}}< / tt>< br /> < TT> hover = {{data.hovered}}< / tt> < / div>< / body>< / html>
h2_lin>解决方案
我有一个答案...
潜在问题：不支持选项元素上的事件。例如，（点击，鼠标悬停，鼠标移动，变化，模糊等）。
基于JC Ford的回应，我决定使用角度材质中的复选框来解决这个问题。我选择不使用材质多重选择，因为用户界面的行为并不特别符合我或客户的期望，但是，如果您想要沿着这条路走下去，我确实测试过了，它确实可以处理这些事件...
附件是我的解决方案。注意： 解决方案不显示复选框，材料不希望显示在这里。
不知道为什么，但如果你把它放到你的应用程序中，它就能正常工作。$ b
（function（angular）{'use strict'; angular.module（'MyApp'，['ngMaterial'，'ngMessages'，'material.svgAssetsCache']）.controller（'AppCtrl'，function（$ scope）{$ scope.selected = []; $ scope.hovered =''; $ scope.model = null; $ scope.items = [{id：'1'，name：'Option A'，health：'Great Health :)' }，{id：'2'，name：'Option B'，health：'Bad Health :('}，{id：'3'，name：'Option C'，health：'Ok Health：|'}] ; $ scope.showExtraInformation = function（option）{$ scope.hovered = option.health;}; $ scope.cl earExtraInformation = function（）{$ scope.hovered ='';}; $ scope.toggle = function（item，list）{var idx = list.indexOf（item）; if（idx> -1）{list.splice（idx，1）; } else {list.push（item）; }}; $ scope.exists = function（item，list）{return list.indexOf（item）> -1; }; $ scope.isIndeterminate = function（）{return（$ scope.selected.length！== 0&&& amp; $ scope.selected.length！== $ scope.items.length）; }; $ scope.isChecked = function（）{return $ scope.selected.length === $ scope.items.length; }; $ scope.toggleAll = function（）{if（$ scope.selected.length === $ scope.items.length）{$ scope.selected = []; } else if（$ scope.selected.length === 0 || $ scope.items.length> 0）{$ scope.selected = $ scope.items.slice（0）; }}; }）;}）（window.angular）;
< ;！doctype html>< html lang =en>< head> < meta charset =UTF-8> < title>示例 - example-select-ngrepeat-production< / title> < script src =// ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js\"> ;</script> < script src =// ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js\"> ;</script> < script src =// ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js\"> ;</script> < script src =// ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js\"> ;</script> < script src =// ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js\"> ;</script> < script src =// s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js\"> ;</script> < script src =// cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.js\"> ;</script> < script src =app.js>< / script>< / head>< body> < div ng-controller =AppCtrlclass =md-padding demo checkboxdemoSelectAllng-app =MyApp> < fieldset class =demo-fieldset> < legend class =demo-legend>将md-checkbox与'indeterminate'属性一起使用< / legend> < div layout =rowlayout-wrap =flex => < div flex-xs =flex =50> < md-checkbox aria-label =全选ng-checked =isChecked（）md-indeterminate =isIndeterminate（）ng-click =toggleAll（）> < span ng-if =isChecked（）>取消 - < / span>全选< / md-checkbox> < / DIV> < div class =demo-select-all-checkboxesflex =100ng-repeat =item in items> < md-checkbox ng-checked =exists（item，selected）ng-click =toggle（item，selected）ng-mouseover =showExtraInformation（item）ng-mouseout =clearExtraInformation（）> {{item.name}}< / md-checkbox> < / DIV> < / DIV> < /字段集> < HR> < tt> model = {{selected}}< / tt>< br /> < TT> hover = {{hovered}}< / tt> < / div>< / body>< / html>
Backstory: I want to display a little more information on an option element inside of a select box. The way I planned about doing this was to hover over an option and display more information about that option below, and this works! :)
The Problem: While this works in every other browser except IE (I tested this issue in IE11), however, it appears as though IE won't trigger the event at all. I tried different ng-{events} here and nothing appears to work. I want to know if there is a workaround for this, or possibly a different way of solving this problem. I created an example of the issue. Be sure to test it in IE11 (this is the browser I need it to work in unfortunately). Why IE WHYYY!!!? :(
Note I am looking for an angular solution. :)
(function(angular) {
'use strict';
angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
hovered: '',
model: null,
showExtraInformation: function (option) {
this.hovered = option.health;
},
clearExtraInformation: function () {
this.hovered = '';
},
availableOptions: [
{id: '1', name: 'Option A', health: 'Great Health :)'},
{id: '2', name: 'Option B', health: 'Bad Health :('},
{id: '3', name: 'Option C', health: 'Ok Health :|'}
]
};
}]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-select-ngrepeat-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="app.js"></script>
<style>
select {height: 100px; width: 200px;}
</style>
</head>
<body ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select multiple name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions"
value="{{option.id}}"
ng-mouseover="data.showExtraInformation(option)"
ng-mouseout="data.clearExtraInformation()">{{option.name}}</option>
</select>
</form>
<hr>
<tt>model = {{data.model}}</tt><br/>
<tt>
hover = {{data.hovered}}
</tt>
</div>
</body>
</html>
解决方案
I have an answer...
Underlying Problem: After some reading, IE does not support events on the "option" element. For example, (click, mouseover, mouseout, change, blur, etc).
Based on JC Ford's response, I decided to solve this problem using checkboxes in angular material. I chose not to use a "material multiple select" since the behavior of the UI is not particularly what I or the client is expecting, however, if you wanted to go down that path, I did test it and it does work with these events...
Attached is my solution.
Note: the solution doesn't show the checkboxes, material doesn't want to show up here. Not sure why, but if you put it into your application, it works.
(function(angular) {
'use strict';
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope) {
$scope.selected = [];
$scope.hovered = '';
$scope.model = null;
$scope.items = [{
id: '1',
name: 'Option A',
health: 'Great Health :)'
},
{
id: '2',
name: 'Option B',
health: 'Bad Health :('
},
{
id: '3',
name: 'Option C',
health: 'Ok Health :|'
}
];
$scope.showExtraInformation = function(option) {
$scope.hovered = option.health;
};
$scope.clearExtraInformation = function() {
$scope.hovered = '';
};
$scope.toggle = function(item, list) {
var idx = list.indexOf(item);
if (idx > -1) {
list.splice(idx, 1);
} else {
list.push(item);
}
};
$scope.exists = function(item, list) {
return list.indexOf(item) > -1;
};
$scope.isIndeterminate = function() {
return ($scope.selected.length !== 0 &&
$scope.selected.length !== $scope.items.length);
};
$scope.isChecked = function() {
return $scope.selected.length === $scope.items.length;
};
$scope.toggleAll = function() {
if ($scope.selected.length === $scope.items.length) {
$scope.selected = [];
} else if ($scope.selected.length === 0 || $scope.items.length > 0) {
$scope.selected = $scope.items.slice(0);
}
};
});
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-select-ngrepeat-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="//cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" class="md-padding demo checkboxdemoSelectAll" ng-app="MyApp">
<fieldset class="demo-fieldset">
<legend class="demo-legend">Using md-checkbox with the 'indeterminate' attribute </legend>
<div layout="row" layout-wrap="" flex="">
<div flex-xs="" flex="50">
<md-checkbox aria-label="Select All" ng-checked="isChecked()" md-indeterminate="isIndeterminate()" ng-click="toggleAll()">
<span ng-if="isChecked()">Un-</span>Select All
</md-checkbox>
</div>
<div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
<md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)" ng-mouseover="showExtraInformation(item)" ng-mouseout="clearExtraInformation()">
{{ item.name }}
</md-checkbox>
</div>
</div>
</fieldset>
<hr>
<tt>model = {{selected}}</tt><br/>
<tt>
hover = {{hovered}}
</tt>
</div>
</body>
</html>
这篇关于Angular：IE11当使用Multiple Select元素时，使用ng-mouseover选项的ng-repeat无法触发方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
