ng-repeat 中 IE 下拉列表中的 Angularjs 無法正確呈現 (Angularjs in IE dropdowns in ng-repeat do not render correctly)

問題描述

ng‑repeat 中 IE 下拉列表中的 Angularjs 無法正確呈現 (Angularjs in IE dropdowns in ng‑repeat do not render correctly)

我有一個組件列表，每個組件都有一個下拉（或 select）控件。我使用 ng‑repeat 渲染這些組件。它在 Chrome 和 Firefox 中運行良好，但在 IE10 中卻不行。在 IE10 中，如果我有以下內容：

<select ng‑model="selection.selected_id">
  <option value="" ng‑selected="!selection.selected_id" ng‑hide="selection.selected_id">
    Select one
  </option>
  <option ng‑repeat="option in options" 
              ng‑selected="option.id === selection.selected_id"
              value="{{option.id}}">
    {{option.name}}
  </option>
</select>

最初我可以在下拉列表中看到 {{option.name}}。只有當我實際單擊下拉列表時，才會呈現正確的值。調查 DOM，我可以在 HTML 中看到正確的值，似乎 IE 本身無法正確呈現它們。 如果選擇不在 ng‑repeat 本身內，那很好！ 這是一個示例 jsfiddle，在 Chrome 中運行它（工作正常），然後在 IE10 中運行（不起作用）。我正在使用最新的 angular (1.5.1)。 有解決辦法嗎？謝謝。

參考解法

方法 1:

it works fine in IE 11

not very sure about the problem but yes data‑ng‑bind is always better option than using {{}}

and

try with ng‑options in select tag. it should work as already tested on IE10 please refer https://docs.angularjs.org/api/ng/directive/ngOptions

方法 2:

You can try this directive. I use this to fix ng‑options issue on IE9‑IE10

.directive('fixCrappyIeSelect', function () {
       return {
            restrict: 'A',
            scope: {
                options: '=fixCrappyIeSelect'
            },
            controller: ['$scope', '$element', function ($scope, $element) {
                $scope.$watch('options', function () {
                    $element.hide();
                    $element.show();
                });
            }]
        };
    });

Hope this will help you

(by Daniel Gruszczyk、Ankur Soni、Pterrat)

參考文件

1. Angularjs in IE dropdowns in ng‑repeat do not render correctly (CC BY‑SA 2.5/3.0/4.0)