AngularJs 选择列出 IE 8 中的重复值答案

【问题标题】：AngularJs select lists duplicated values in IE 8AngularJs 选择列出 IE 8 中的重复值
【发布时间】：2014-05-15 02:23:02
【问题描述】：

在我的第一个使用 html5 和 angular（版本 1.2.13）的 Web 应用程序中，我遇到了 select 元素的问题。
虽然它在 Chrome 和 Firefox 中运行良好，但在 IE 8 中，第二个 select 元素中的所有值都是重复的。

这里是html部分：

<!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',[]);

这里是控制器：

"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];

});

有什么想法可能是错误的，或者如何解决这个问题？

【问题讨论】：

标签： html angularjs internet-explorer select ng-options

【解决方案1】：

表单元素中的段落标签导致 IE 出现这种奇怪的行为。当用替换段落标签时，第二个选择元素中的选项值将正确呈现，即使在 IE 中也是如此。

我不知道为什么标签会导致 IE 中的选项值呈现问题。也许其他人对此有解释......

这里是解决方法：

<!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>

【讨论】：