<select> 元素的第一个选择在 IE 中不起作用答案

【问题标题】：First selection of <select> element not working in IE<select> 元素的第一个选择在 IE 中不起作用
【发布时间】：2014-05-22 15:34:03
【问题描述】：

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

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

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

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

我使用的是 IE 11，这里有一个例子来说明这个问题。 http://jsfiddle.net/Q26mW/

【问题讨论】：

我在 IE10 中遇到了同样的问题。见stackoverflow.com/questions/19388030/…
它似乎没有修复它，我在这里用一个新的小提琴试过它jsfiddle.net/Hr8S4
那是因为 Angular 会使用对象相等，你需要将 ng-model 设置为数组中的实际项目。见jsfiddle.net/V5U6P/1
当然，我将初始值设置为 null 而不是空元素。当您发布第一个正确答案时，您真的应该为此获得赏金（全部作为评论）
把它交给那个回答我当时链接的问题的人。这就是这个解决方法的来源。

标签： angularjs internet-explorer

【解决方案1】：

我发现最新版本的 angularJS >= 1.2.21 已修复此问题

固定角度版本 1.2.21 - http://plnkr.co/edit/LJagDO6VgFORuU4vxQON?p=preview

破角版本 1.2.20 - http://plnkr.co/edit/I1dG9ShSw9bJspcu6R0l?p=preview

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.2.21/angular.min.js"></script>
<script>
angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.data = {};
    $scope.data.users = [{
      name: 'John Doe',
      userName: 'jdoe'
    }, {
      name: 'Jane Smith',
      userName: 'jsmith'
    }, {
      name: 'Foo Bar',
      userName: 'foobar'
    }];
  });
 </script>
</head>

<body>
 <h1>Angular IE9-IE11 Select Issue</h1>
 <div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="data.selectedUser" ng-options="user.name for user in data.users"></select>
<div>Selected User:
  <label>{{data.selectedUser}}</label>
  </div>
</div>
</body>

【讨论】：

【解决方案2】：

我已经制定了一个指令来处理这个......我称之为“空选项”：

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

该指令允许为选择指定一个空选项。它在进行选择时删除选项，并在清除模型值时添加回空选项。

小提琴here.

【讨论】：

这行得通，但我必须让@ivarni 有机会领取赏金，因为他的回答（都是评论）是第一个正确答案。如果他不打扰我明天就奖励给你。
这与评论中的不同。在您的示例中“有效”的下拉菜单会在进行选择时删除空选项。 typeOptions 数组中的空白值不会这样做...此外，该指令允许您创建一个选项，例如“--选择一个值--”，该选项将在进行选择时消失。如果您想要一个不会消失的空选项，只需将其添加到视图中，而无需在范围内设置它：jsfiddle.net/Q26mW/9
非常感谢这个解决方案 - 它解决了 iPhone 上的 WebView（想想 Cordova）中发生的另一个问题。我们遇到的问题是，在 iOS 上，我们会在选择后在下拉列表中看到错误的值（它会显示索引 + 1 的项目）。我需要做的唯一更改是将 if(newVal === undefined) 替换为 if(!newVal)