CODEWITHSUNDEEP
angularjsinternet-explorerangularjs-ng-repeat
Daniel Gruszczyk
Daniel Gruszczyk

Reputation: 5622

Angularjs in IE dropdowns in ng-repeat do not render correctly

I have a list of components, each of these components has a dropdown (or select) control. I render these components using ng-repeat. It works fine in Chrome and Firefox, but it doesn't in IE10. In IE10 if I have the following:

<select ng-model="selection.selected_id">
  <option value="" ng-selected="!selection.selected_id" ng-hide="selection.selected_id">
    Select one
  </option>
  <option ng-repeat="option in options" 
              ng-selected="option.id === selection.selected_id"
              value="{{option.id}}">
    {{option.name}}
  </option>
</select>

Initially I can see {{option.name}} in a dropdown. Only when I actually click on the dropdown the correct value renders. Investigating the DOM, I can see correct values in HTML, it seems like the IE itself doesn't render them correctly.
It is fine if the select is not within ng-repeat itself!
Here is an example jsfiddle, run it in Chrome (works fine) and then in IE10 (doesn't work). I am using latest angular (1.5.1).
Is there a fix for that? Thanks.

Upvotes: 1

Views: 2154

Answers (2)

Ankur Soni
Ankur Soni

Reputation: 746

it works fine in IE 11

not very sure about the problem but yes data-ng-bind is always better option than using {{}}

and

try with ng-options in select tag. it should work as already tested on IE10 please refer https://docs.angularjs.org/api/ng/directive/ngOptions

Upvotes: 2

Pterrat
Pterrat

Reputation: 1710

You can try this directive. I use this to fix ng-options issue on IE9-IE10

.directive('fixCrappyIeSelect', function () {
       return {
            restrict: 'A',
            scope: {
                options: '=fixCrappyIeSelect'
            },
            controller: ['$scope', '$element', function ($scope, $element) {
                $scope.$watch('options', function () {
                    $element.hide();
                    $element.show();
                });
            }]
        };
    });

Hope this will help you

Upvotes: 1

Related Questions