All geek questions in one place

First selection of a <select> element that does not work in IE

We observe some really strange behavior in IE when using a directive ng-optionswith an element selectthat does not happen when we use <option ng-repeat=''>.

The first time I select a parameter from the drop-down list that was created using ng-options, no matter which option I choose, the first is displayed.

If I use ng-repeat to create parameters, it works great every time.

If I select the option from the “broken” drop-down list, select the option from the unbroken one, the first drop-down field will really change the selected item to display the correct choice.

I am using IE 11 and have an example showing the problem. http://jsfiddle.net/Q26mW/

+4
source share
2 answers

I 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 may indicate an empty option for selection. It removes the parameter when selected and adds the empty option back when the model value is cleared.

Fiddle is here .

+3
source

I found this to be fixed in the latest version of angularJS> = 1.2.21

FIXED angular ver 1.2.21 - http://plnkr.co/edit/LJagDO6VgFORuU4vxQON?p=preview

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

+4
source

Source: https://habr.com/ru/post/1541637/

More articles:


All Articles