1

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

这是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>

应用程序.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];

});

任何想法这里可能有什么问题或如何解决这个问题？

4

1 回答 1

1

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

我不知道为什么 <'p> 标记会导致 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>
于 2014-04-07T06:33:17.043 回答