Search code examples
htmlangularjsinternet-explorerselectng-options

AngularJs select lists duplicated values in IE 8

In my first web aplication using html5 and angular (version 1.2.13) I have a problem with the select element.
While it runs fine in Chrome and Firefox, in IE 8 all values within the second select element are duplicated.

Here is the html part:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="selsample">
<head>
<meta charset="UTF-8">
<title>NG Select Test</title>
<link href="styles/main.css" type="text/css" rel="stylesheet">
</head>
<body ng-controller="mainCtrl">
  <h1>Select Example</h1>
  <p>
  <form name="myForm">
    Select month
    <select ng-model="selectedMonat" ng-options="m.monat for m in monate"></select>
    <p>
    select again
    <!-- here all values are duplicated... -->
    <select ng-model="selectedMonat" ng-options="m.monat for m in monate"></select>
  </form>
  <script src="lib/angular/angular.js"></script>
  <script src="scripts/app.js"></script>
  <script src="scripts/controllers/mainCtrl.js"></script>
</body>
</html>

app.js:

"user strict";
angular.module('selsample',[]);

And here is the controller:

"use strict";

angular.module('selsample').controller('mainCtrl', function($scope) {

  $scope.monate = [ {
    "miy" : "01",
    "monat" : "Jänner"
  }, {
    "miy" : "02",
    "monat" : "Februar"
  }, {
    "miy" : "03",
    "monat" : "März"
  }, {
    "miy" : "04",
    "monat" : "April"
  }, {
    "miy" : "05",
    "monat" : "Mai"
  }, {
    "miy" : "06",
    "monat" : "Juni"
  }, {
    "miy" : "07",
    "monat" : "Juli"
  }, {
    "miy" : "08",
    "monat" : "August"
  }, {
    "miy" : "09",
    "monat" : "September"
  }, {
    "miy" : "10",
    "monat" : "Oktober"
  }, {
    "miy" : "11",
    "monat" : "November"
  }, {
    "miy" : "12",
    "monat" : "Dezember"
  } ];
  $scope.selectedMonat = $scope.monate[0];

});

Any ideas what could be wrong here or how to solve this problem?

Solution

  • The paragraph tag <'p> within the form element is causing this strange behaviour in IE. When replacing the paragraph tag <'p> by <'br> the option values in the second select element will be rendered correctly, even in IE.

    I have no idea why the <'p> tag is causing the rendering problem of the option values in IE. Maybe someone else have an explanation for this...

    Here is the workaround:

    <!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="selsample">
<head>
<meta charset="UTF-8">
<title>NG Select Test</title>
<link href="styles/main.css" type="text/css" rel="stylesheet">
</head>
<body ng-controller="mainCtrl">
  <h1>Select Example</h1>
  <p>
  <form name="myForm">
    Select month
    <select ng-model="selectedMonat" ng-options="m.monat for m in monate"></select>

    <!--
      the paragraph tag causes the problem in IE
    <p>
    -->
    <br>   
    <br>   
    select again
    <select ng-model="selectedMonat" ng-options="m.miy for m in monate"></select>

  </form>
  <script src="lib/angular/angular.js"></script>
  <script src="scripts/app.js"></script>
  <script src="scripts/controllers/mainCtrl.js"></script>
  <script src="scripts/directive/ieSelectFix.js"></script>
</body>
</html>