Angularjs 在 ng-repeat 的 IE 下拉菜单中无法正确呈现

Question

我有一个组件列表，每个组件都有一个下拉（或 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 本身没有正确呈现它们。
如果 select 不在 ng-repeat 本身内就可以了！
这是一个示例 jsfiddle，运行它在 Chrome 中（工作正常）然后在 IE10 中（不工作）。我正在使用最新的 angular (1.5.1).
有解决办法吗？谢谢。

Answer 1

你可以试试这个指令。我用它来修复 IE9-IE10

上的 ng-options 问题

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

希望对您有所帮助

Answer 2

它在 IE 11

中工作正常

不太确定这个问题，但是是的，data-ng-bind 总是比使用 {{}}

更好的选择

和

尝试在 select 标签中使用 ng-options。它应该像已经在 IE10 上测试过的那样工作请参考https://docs.angularjs.org/api/ng/directive/ngOptions

Angularjs 在 ng-repeat 的 IE 下拉菜单中无法正确呈现

Angularjs in IE dropdowns in ng-repeat do not render correctly

internet-explorer

angularjs

ng-repeat