Ng-options, заполненные ajax, только отображающие первую букву в IE

Я испытываю странную проблему в Angular, похоже, только в Internet Explorer 9.

Если вы проверите следующий jsfiddle: http://jsfiddle.net/U3pVM/382/

Вы можете видеть, что 2 выборки заполнены, но отображение в IE кажется сломанным, и выбрана только первая буква "A" из "Apple". Все параметры отображаются при нажатии кнопки выбора.

Код очень прост, я заполняю переменную, которая управляет выбором в обратном вызове.

.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, проблема возникает.

Ответ 1

Вы используете Angularjs, так что ответ таков:

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

Обратите внимание, что вам не нужно устанавливать ширину как 100%. Вместо этого вы можете использовать px.

Ответ 2

См. <select> показывает только первый char выбранного варианта

У нас была одна и та же проблема, и что-то вроде того, что ниже нашло вокруг нас.

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

Конечно, все наши выборки имеют одинаковую ширину. Вам может потребоваться уточнить селектор в соответствии с вашими потребностями. В основном вам просто нужно заставить IE перерисовывать выбор так или иначе. Обновлена скрипка.

Ответ 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

Хотя это странно, но, к счастью, это то, что вы хотите снова запустить тег select.

ng-show="List.length > 0"