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本身并没有正确地呈现它们。
如果选择不在ng-repeat本身内就可以了！这是一个示例jsfiddle，在Chrome中运行（正常），然后在IE10中运行（不起作用）。我正在使用最新的角度（1.5.1）有没有修复？感谢。

Answer 1

在 IE 11

中工作正常

对这个问题不太确定，但是数据-ng-bind总是比使用{{}}更好的选择

和

尝试使用select标记中的 ng-options 。它应该像在IE10上测试一样工作请参阅https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 2

您可以尝试此指令。我用它来修复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();
                });
            }]
        };
    });

希望这会对你有所帮助

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

2 个答案: