的＆LT第一选择;选择＆GT;元素在IE浏览器不工作 [英] First selection of <select> element not working in IE

问题描述

我们正在使用时，看到在IE一些非常奇怪的行为NG-选项指令与选择元素选项​​NG重复=''＆GT;当我们使用＆LT这是不会发生。

We're seeing some really odd behaviour in IE when using the ng-options directive with a select element which are not happening when we use <option ng-repeat=''>.

我第一次选择下拉框中，其使用 NG-选项创建的，哪个选项我选择，则显示第一个选项。

The first time I select an option from the drop down box which was created using ng-options, whichever option I select, the first one is displayed.

如果我用NG-重复创建它完美的选项每次。

If I use ng-repeat to create the options it works perfectly every time.

如果我选择从破的选项下拉菜单，然后选择从不破的，第一个下拉框实际上改变了它的选择项目，以显示正确的选择的选项。

If I select an option from the "broken" drop down, then select an option from the not broken one, the first drop down box actually changes it's selected item to display the correct selection.

我使用的是IE 11，并已得到了一个例子这里显示的问题。 http://jsfiddle.net/Q26mW/

I'm using IE 11 and have got an example here showing the issue. http://jsfiddle.net/Q26mW/

推荐答案

我已经做了指示来处理这个......我把它叫做空选项

I have made a directive to handle this... I called it "empty-option":

myApp.directive("emptyOption", ["$timeout", function ($timeout) {
    return {
        restrict: "A",
        require: "^ngModel",
        link: function (scope, element, attrs, ngModelCtrl) {
            //Get "SELECT" element of empty option
            var parentSelectDom = element[0].parentNode,
                removed = false;

            //Make sure the element is "SELECT" before proceeding.
            if (parentSelectDom.nodeName === "SELECT") {

                //When $modelValue changes, either add/remove empty option
                //based on whether or not $modelValue is defined.
                scope.$watch(function () {
                    return ngModelCtrl.$modelValue;
                }, function (newVal, oldVal) {
                    if (newVal === undefined) {
                        if (removed) {
                            $timeout(function () {
                                //Add empty option back to list.
                                parentSelectDom.add(element[0], parentSelectDom[0]);
                            }, 0);
                            removed = false;
                        }
                    }
                    else if (!removed) {
                        $timeout(function () {
                            //remove empty option.
                            parentSelectDom.remove(0);
                        }, 0);
                        removed = true;
                    }
                });
            }
        }
    }
}]);

该指令允许一个选择要指定一个空的选项。它消除选择时作出的选项，并增加了回当模特值将被清除空的选项。

The directive allows for an empty option to be specified for a select. It removes the option when a selection is made and adds back the empty option when the model value is cleared.

这里。

这篇关于的＆LT第一选择;选择＆GT;元素在IE浏览器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！