14

我在 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 中显示多个选择时才会发生问题。

4

6 回答 6

11

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

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

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

于 2013-08-19T09:48:48.350 回答
8

请参阅<select> 仅显示所选选项的第一个字符

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

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

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

于 2013-03-25T17:44:35.743 回答
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>
于 2014-04-16T08:33:50.227 回答
1

当我的项目在要求上进行了非常晚的更改以支持 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);
                });
            }
        }
    };
}]);
于 2015-05-06T16:33:29.353 回答
1

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

于 2015-12-18T08:05:46.950 回答
0

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

ng-show="List.length > 0"
于 2016-02-05T16:28:18.000 回答