First selection of

Question

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=''>.

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.

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.

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

howserss · Accepted Answer

I have found this is 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>

First selection of <select> element not working in IE

Tags:

angularjs

internet-explorer

BenCr

1 Answers

howserss

Recent Activity

Donate For Us