Question

在我使用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];

});

任何想法在这里可能出错或如何解决这个问题？

Answer 1

段落标记＆lt;＆＃p; p＆gt;在form元素中导致IE中的这种奇怪行为。替换段落标记＆lt;＆＃39; p＆gt;由＆lt;＆＃br;即使在IE中，第二个选择元素中的选项值也会正确呈现。

我不知道为什么＆lt;＆＃p; p＆gt;标签导致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>

AngularJs在IE 8中选择列出重复值

1 个答案: