ng-options populated by ajax only displaying first letter in IE

Question

I am experiencing an odd issue in Angular, seemingly only in Internet Explorer 9.

If you check the following jsfiddle: http://jsfiddle.net/U3pVM/382/

You can see that the 2 selects are populated, but the display in IE seems broken, and only the first letter, 'A' of 'Apple' is selected. All options display when the select is clicked on.

.

The code is very simple, I populate the variable that drives the select in the success callback.

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

The ng-options code for the select is as follows;

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

I have noticed that the glitch doesn't happen if I am using a single select element, it is only when I display multiple selects in an ng-repeat that the issue happens.

Winebibber

seems like possible bug, check issues in github – Baba

Answer 1

You are using Angularjs so the answer is like this:

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

Note that you don't have to set width as 100%. You can use px instead.

Rutland

Unfortunately that does not address the problem at hand. – Winebibber

This fixes the problem but it isn't very pretty having to put ng-style on all your select tags. – Monopolist

I tried lots of ways to repaint the element, which is whats needed to fix the IE9 glitch. Anything that worked for IE9 also broke other browsers. Finally found this and it works on everything I've tested. Great idea. Thank you! – Rainproof

Answer 2

See <select> only shows first char of selected option

We had the same issue and something like what's below got us around it.

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

Of course, all of our selects are the same width. You may need to refine the selector to suit your needs. Basically you just need to force IE to repaint the selects one way or another. Updated fiddle.

Histoplasmosis

Great, thanks! Out of interest, what is the purpose of the $timeout you added to the fiddle you updated? – Winebibber

For some reason I was thinking it was needed for it to work, but I took it out, and it still works fine, so just ignore that part I guess. That fiddle is here: jsfiddle.net/U3pVM/411 – Histoplasmosis

Answer 3

I just experienced this same problem in IE 9. The workaround is to only show the select after the ajax data is available. A simple solution in AngularJs is to add follow to the select: 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>

Curitiba

Answer 4

When my project got a very late change in requirements to also support IE9 I didn't want to go back and annotate all of my <select> elements or controllers to deal with this problem, so I wrote the following directive to add behavior to all of them automatically:

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);
                });
            }
        }
    };
}]);

Arabela

I tried many of the other proposed solutions but this was the only one that worked for me. – Othilie

Answer 5

Neither of these worked for me, and not "ng-show" as suggested in a similar post, but "ng-if" around spanning element seemed to do the trick.

Gallard

Answer 6

Although it's weird but fortunately this is what you want to trigger the select tag again.

ng-show="List.length > 0"

Mckinley