internet-explorer - 如何解决动态更改选项时 IE 选择问题

Question

我有一组选择，它们都具有相同的选项。然后，我通过过滤器运行这些选项，以便在不同选择中选择的任何选项都不会显示在选择中。请参阅this jsFiddle (在非 IE 浏览器中)看看我的意思。基本上，我防止在选择中多次选择同一选项

现在，我所做的在 IE 中出现了问题。在 IE 中打开那个 fiddle (我只在 IE9 中尝试过，但我猜以前的版本也有同样的问题)。将最后一个选择更改为 AAA。请注意其他 3 个选择如何更改了它们显示的内容。他们的模型没有改变，但当选项改变时，IE 不知怎的就卡住了。

我的问题是，首先，我是否对这个功能做错了什么？这段代码在 Chrome 和 FF 中完全符合我的要求，但我是否做了一些不应该做的事情？其次，如何在 IE 中解决这个问题？我尝试了一些超时来清除并重新设置模型，但明显的事情发生了变化。我想知道是否有一个好的、干净的、低影响的解决方法。

任何帮助将不胜感激。谢谢。

--更新--

这已经是fixed在 Angular 本身中 version 1.3.3使用A. S. Ranjan's solution以下。请参阅 1.3.3 的新 fiddle :http://jsfiddle.net/m2ytyapv/

//dummy code so I can post the edit

Answer 1

前几天晚上我遇到了同样的问题，在尝试了所有我能想到的方法后，我得出的结论是 IE 只是不想在使用选择时处理更新过滤器。

我的解决方案是将您的选择更改为如下所示:

 <select class="selectList" ng-repeat="currId in selectedIds" ng-model="selectedIds[$index]"  ng-options="currOption.id as currOption.value for currOption in myObj | myfilter:selectedIds:$index" data-ng-change="fixIE()"></select>

他们现在有一个类和一个 ng-change。然后在你的 Controller 中执行这段有趣的代码:

$scope.fixIE = function(){
    //code to check if IE so the other browsers don't get this ugly hack.
    var selectLists = document.querySelectorAll(".selectList");
    for(var x = 0;x  < selectLists.length; x++){
        selectLists[x].parentNode.insertBefore(selectLists[x], selectLists[x]);
    }       
};

它的作用是将元素从 DOM 中剥离出来并将它们替换到相同的位置。这是一个工作 fiddle jsFiddle

我尝试过的一些不涉及 JavaScript 的其他解决方案是诸如切换选择的显示/可见性之类的事情。他们的 zIndex 已移动。唯一能确定解决这个问题的是这段代码。