この問題は、フィルターによって返されるオプションの順序に関連しているようです。最後のオプションを に変更するAと、他の選択オプションが変更されます。IE の問題の原因と思われるのは、選択したオプションの場所が変わることです。最初の選択ボックスCでは、次の順序でオプションから選択されますA, B, C, D。選択したオプションは3 番目のオプションです。4 番目の選択ボックスを からGにA変更すると、フィルタは最初のボックスのオプションを に変更しますB, C, D, G。選択したオプションが2 番目のオプションになりました、これにより 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();
}
})
});
}
}
}
});
ng-repeats 内の要素を選択するには、ie-select-fix を追加するだけです。
<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/ (新規)