Question

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

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

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

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

我正在使用IE 11，并在这里有一个示例来说明问题。 http://jsfiddle.net/Q26mW/

Answer 1

我发现这是在最新版本的angularJS＆gt; = 1.2.21

中修复的

FIXED angular ver 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>

Answer 2

我已经制定了一个指令来解决这个问题......我称之为＃34;空选项＆＃34;：

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。

首先选择<select>元素不在IE中工作</select>

2 个答案: