6

With IE 8, if I have a select list like so...

            <select required ng-options="n for n in monthNumbers" ng-model="month">
            </select>

...then Angular adds a blank first option in. Then when I select any option, IE 8 will select the option that comes after it. So if I select month 1, it will select month 2.

If I add an initial element like this...

        <select required ng-options="n for n in monthNumbers" ng-model="month">
           <option></option>
        </select>

... then the problem is fixed. However then Angular won't remove the empty first element when any other item is selected which is the behavior I want.

Is there a decent way around this?

Ian Warburton
  • 15,170
  • 23
  • 107
  • 189
  • What is the first value of `n`? – Sebastien Jul 17 '13 at 14:27
  • Can you add a JSFiddle or Plunker ? – EpokK Jul 17 '13 at 14:30
  • I don't think they work in IE 8. – Ian Warburton Jul 17 '13 at 14:32
  • It looks like what its doing in IE 8 is not removing the added initial null element when you select a value and then when you try and select another element the first element is invalid so it picks the next one along. – Ian Warburton Jul 17 '13 at 14:56
  • Yes... the initial element is removed in IE but its still shown in the set of options. Its a phantom option. – Ian Warburton Jul 17 '13 at 15:38
  • 2
    Actually the select menu works when you select an item for the first time. After that angular removes the empty option but IE8 doesn't remove that option from the list of options that is opened when user clicks the select menu. If you inspect the element with IE8 developer tools then you see that the empty option is gone. IE8 just doesn't bother to update the UI and that is why the option values goes off by one. – Mika Oct 14 '13 at 06:32

3 Answers3

3

I added ng-disabled="true" to the manually added initial options and that stops people from selecting them in IE 8.

https://stackoverflow.com/a/2031748/221683

Community
  • 1
  • 1
Ian Warburton
  • 15,170
  • 23
  • 107
  • 189
1

Use ng-options like this:

<select required ng-options="month.value as month.label for month in months" ng-model="month"></select>
EpokK
  • 38,062
  • 9
  • 61
  • 69
  • ng-options works fine. Its an array of numbers like this... $scope.monthNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; – Ian Warburton Jul 17 '13 at 14:37
0

assign a value to your ng-model on ng-init, if you are not assigning value to model when your controller loads, it finds the model empty

lisapanda
  • 53
  • 3