问题似乎与过滤器返回的选项的顺序有关。当您将最后一个选项更改为 时A
,其他选择选项会更改。似乎对 IE 造成问题的是所选选项更改了位置。在第一个选择框中C
按以下顺序从选项中选择:A, B, C, D
。选中的选项是第三个选项。当您将第四个选择框从更改G
为 时A
,过滤器会将第一个框中的选项更改为B, C, D, G
。所选选项现在是第二个选项,这会导致 IE 出现问题。这可能是 Angular 中的错误,也可能是 IE 中的一些奇怪行为。通过确保所选元素始终是过滤选项中的第一个选项,我创建了一个解决此问题的分支:
var newOptions = [],selected;
angular.forEach(allOptions, function (currentOption) {
if (!isIdInUse(selectedIds, currentOption.id)){
newOptions.push(currentOption);
}else if(currentOption.id == selectedIds[parseInt(index)]){
selected = currentOption;
}
});
if(selected){newOptions.unshift(selected);}
http://jsfiddle.net/XhxSD/(旧)
更新:
我做了一些调试,发现在 IE 中导致问题的行,但我不明白为什么。它看起来确实像一个渲染错误或其他东西。我创建了另一个不需要重新排列选项的解决方法——它是一个监视选择元素变化的指令。如果检测到更改,它会附加一个选项并立即将其删除:
.directive('ieSelectFix',function($timeout){
return {
require:'select',
link: function (scope, element) {
var isIE = document.attachEvent;
if(isIE){
$timeout(function(){
var index = element.prop('selectedIndex'), children = element.children().length;
scope.$watch(function(){
if(index !== element.prop('selectedIndex') || children !== element.children().length){
index = element.prop('selectedIndex');
children = element.children().length;
var tmp =angular.element('<option></option>');
element.append(tmp);
tmp.remove();
}
})
});
}
}
}
});
只需添加 ie-select-fix 来选择 ng-repeats 中的元素:
<div ng-app="myApp" ng-controller="MyCtrl">
<select ie-select-fix ng-repeat="currId in selectedIds" ng-model="selectedIds[$index]" ng-options="currOption.id as currOption.value for currOption in myObj | myfilter:selectedIds:$index"></select><br>
{{selectedIds}}
</div>
http://jsfiddle.net/VgpyZ/(新)