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

【问题标题】：ng-options populated by ajax only displaying first letter in IE由 ajax 填充的 ng-options 仅在 IE 中显示第一个字母
【发布时间】：2013-03-12 16:47:07
【问题描述】：

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

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

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

.

代码很简单，我在成功回调中填充了驱动选择的变量。

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

select的ng-options代码如下；

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

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

【问题讨论】：

似乎是可能的错误，在 github 中检查问题

标签： angularjs internet-explorer internet-explorer-9

【解决方案1】：

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

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

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

【讨论】：

不幸的是，这并没有解决手头的问题。
这解决了问题，但在所有选择标签上都加上ng-style 并不是很漂亮。
我尝试了很多方法来重新绘制元素，这是修复 IE9 故障所需要的。任何适用于 IE9 的东西也会破坏其他浏览器。终于找到了这个，它适用于我测试过的所有东西。好点子。谢谢！

【解决方案2】：

见<select> only shows first char of selected option

我们遇到了同样的问题，下面的内容让我们解决了这个问题。

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

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

【讨论】：

太好了，谢谢！出于兴趣，您在更新的小提琴中添加的 $timeout 的目的是什么？
出于某种原因，我认为它需要它才能工作，但我把它拿出来了，它仍然可以正常工作，所以请忽略我猜的那部分。那个小提琴在这里：jsfiddle.net/U3pVM/411

【解决方案3】：

我刚刚在 IE 9 中遇到了同样的问题。解决方法是仅在 ajax 数据可用后才显示选择。 AngularJs 中的一个简单解决方案是在选择中添加以下内容：ng-show="ReasonsChoice_ajax.length > 0"。

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

【讨论】：

【解决方案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);
                });
            }
        }
    };
}]);

【讨论】：

我尝试了许多其他建议的解决方案，但这是唯一适合我的解决方案。

【解决方案5】：

这些都不适合我，而不是类似帖子中建议的“ng-show”，但围绕跨越元素的“ng-if”似乎可以解决问题。

【讨论】：

【解决方案6】：

虽然很奇怪，但好在这就是你要再次触发选择标签的地方。

ng-show="List.length > 0"

【讨论】：