Question

我在Angular中遇到了一个奇怪的问题，似乎只在Internet Explorer 9中出现过。

如果您查看以下jsfiddle：http://jsfiddle.net/U3pVM/382/

您可以看到填充了2个选项，但IE中的显示似乎已损坏，并且仅选择了“Apple”的第一个字母“A”。单击选择时将显示所有选项。

代码非常简单，我填充了在成功回调中驱动select的变量。

.success(function (data) {
    $scope.ReasonsChoice_ajax = data;
});

选择的ng-options代码如下;

 <select ng-model="Reason" ng-options="Reason for Reason in ReasonsChoice_ajax"></select>

我注意到如果我使用单个select元素就不会发生毛刺，只有当我在ng-repeat中显示多个选择时才会出现问题。

Answer 1

您正在使用Angularjs，所以答案是这样的：

<select ng-style="{'width': '100%'}"></select>

请注意，您不必将宽度设置为100％。你可以改用px。

Answer 2

请参阅<select> only shows first char of selected option

我们遇到了同样的问题，以及下面的内容让我们围绕它。

$("select").css("width", $("select").css("width"));

当然，我们所有的选择都是相同的宽度。您可能需要优化选择器以满足您的需求。基本上你只需要迫使IE以某种方式重新绘制选择。 Updated fiddle

Answer 3

我刚刚在IE 9中遇到过同样的问题。解决方法是仅在ajax数据可用后显示select。 AngularJs中的一个简单解决方案是在select中添加以下内容：ng-show =＆＃34; ReasonsChoice_ajax.length＆gt; 0＆＃34;

<select ng-model="Reason" ng-show="ReasonsChoice_ajax.length > 0" ng-options="Reason for Reason in ReasonsChoice_ajax"></select>

Answer 4

当我的项目得到了很晚的需求改变以支持IE9时，我不想回去并注释我所有的<select>元素或控制器来处理这个问题，所以我写了以下指令自动向所有人添加行为：

angular.module('xxxxx')
.directive('select',
           ['$log', '$parse', '$timeout', function ($log, $parse, $timeout) {
    var NG_OPTIONS_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;
    return {
        restrict: 'E',
        scope: true,
        require: ['select', '?ngModel'],
        link: function (scope, elem, attrs, control) {
            var isIE = document.attachEvent,
                match; 

            if (isIE
                && attrs.ngOptions
                && (match = attrs.ngOptions.match(NG_OPTIONS_REGEXP))) {
                var values = $parse(match[7]);
                scope.$watchCollection(values, function () {
                    // Redraw this select element 
                    $timeout(function () {
                        var originalWidth = $(elem).css('width');
                        $(elem).css('width', '0');
                        $(elem).css('width', originalWidth);
                    }, 10);
                });
            }
        }
    };
}]);

Answer 5

这些都不适合我，而不是＆＃34; ng-show＆＃34;正如在类似的帖子中所建议的那样，但是＆＃34; ng-if＆＃34;跨越元素似乎可以解决问题。

Answer 6

虽然很奇怪，但幸运的是，这是你想要再次触发选择标签的内容。

ng-show="List.length > 0"

由ajax填充的ng-options仅显示IE中的第一个字母

6 个答案: