angularjs – 首先选择的元素在IE中不起作用

发布时间：2020-12-17 17:20:15 所属栏目：安全来源：网络整理

导读：当我们使用带有select元素的ng-options指令时,我们在IE中看到一些非常奇怪的行为,当我们使用 option ng-repeat =''时,这些行为不会发生. 我第一次从使用ng-options创建的下拉框中选择一个选项,无论我选择哪个选项,都会显示第一个选项. 如果我使用ng-repeat创

当我们使用带有select元素的ng-options指令时,我们在IE中看到一些非常奇怪的行为,当我们使用< option ng-repeat =''>时,这些行为不会发生.

我第一次从使用ng-options创建的下拉框中选择一个选项,无论我选择哪个选项,都会显示第一个选项.

如果我使用ng-repeat创建选项,它每次都能完美运行.

如果我从“损坏”下拉列表中选择一个选项,然后从未损坏的选项中选择一个选项,则第一个下拉框实际上会更改其选定项目以显示正确的选择.

我正在使用IE 11,并在此处举例说明了这个问题. http://jsfiddle.net/Q26mW/

解决方法

我已经制定了一个指令来解决这个问题……我称之为“空选”：

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;
                    }
                });
            }
        }
    }
}]);

该指令允许为select指定一个空选项.在进行选择时,它会删除该选项,并在清除模型值时添加空选项.

小提琴here.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!