Angular：IE11当使用Multiple Select元素时，带有ng-mouseover选项的ng-repeat无法触发方法

Backstory：我想在选择框内显示一个选项元素的更多信息。我计划这样做的方式是将鼠标悬停在一个选项上，并在下面显示有关该选项的更多信息，并且这可行！ :)Angular：IE11当使用Multiple Select元素时，带有ng-mouseover选项的ng-repeat无法触发方法

问题：虽然这部作品在IE以外其他浏览器（我在IE11测试了这个问题），但是，它看起来好像IE不会在所有的触发事件。我在这里尝试了不同的ng- {events}，看起来没有任何效果。我想知道是否有解决此问题的办法，或者解决此问题的其他方法。我创建了一个问题的例子。一定要在IE11中测试它（这是我需要它在不幸中工作的浏览器）。为什么IE浏览器WHYYY !!!？ :(

注意我要找一个角度的解决方案。:)

(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>

来源

2017-09-15 eaglejs

最好的办法是使用一个UI库（如剑道UI或UI引导），该重新实现下拉菜单，而不是让浏览器呈现正常的选择元素。 –

是的，我正在考虑这个，有点想成为我的最后一招。 – eaglejs

我有一个答案......

潜在的问题：一些阅读后，IE不支持“选项”元素上的事件。例如（单击，鼠标悬停，鼠标移动，更改，模糊等）。

根据JC Ford的回复，我决定使用角材料中的复选框来解决这个问题。我选择不使用“材质多重选择”，因为用户界面的行为并不特别符合我或客户的期望，但是，如果您想要沿着这条路走下去，我确实测试过了，它确实可以处理这些事件...

附加是我的解决方案。

注意：解决方案不显示复选框，材料不想显示在这里。不知道为什么，但如果你把它放到你的应用程序，它的工作原理。

(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>

来源

2017-09-19 19:25:42 eaglejs

在IE 11的模糊事件鼠标按下之前触发，因此，检查如果存在元素和目标元素是相同的然后返回或者否滚动功能有些东西

内部模糊事件

bind("blur", function(e) { 
var tarElement = event.relatedTarget ? event.relatedTarget : nextElement; 
     if (tarElement.id === iElement.attr('id')) { 
      return; 
     } else { 
      CALL scroll 
     }

来源

2017-09-15 21:40:52

不是我在找什么，如果你注意到，这是一个鼠标悬停，而不是一个mousedown。 – eaglejs

Angular：IE11当使用Multiple Select元素时，带有ng-mouseover选项的ng-repeat无法触发方法

回答

相关问题