IE shows binding in select instead of value using AngularJS

By rickvdbosch

- 2 minutes read - 326 words

Part of the system we are developing uses AngularJS. Because we had an increase in the use of our system, and more diverse configurations were using our system, we got some new bugs filed. One of these bugs was about a select list showing the binding in stead of the actual value for several options. Since this ‘worked on our machines’ it had to be connected to the client’s configuration. As soon as stuff (options in this case) started moving around, it got even prettier…

I’ve tried several solutions like using ng-value instead of value and using the fixIE() solution that roams the internet. Unfortunately all to no avail. Finally I did find solution. Let me share it so you don’t have to look for one as long as I did 😉

Original code

Our original code was in a directive that actually used two select lists to facilitate moving values from one to another, enabling and disabling items. It looked something like this:

<div>
    <select ng-model="selectedLeft" multiple style="float: left; width:40%; height: 300px;">
        <option ng-repeat="option in selected track by $index" value="{{option}}">{{option | lowercase}}</option>
    </select>
    <section style="float: left; padding: 10px;">
        <button ng-click="moveRight()" ng-disabled="selectedLeft.length < 1">>></button>
        <button ng-click="moveLeft()" ng-disabled="selectedRight.length < 1"><<</button>
    </section>
    <select ng-model="selectedRight" multiple style="float: left; width:40%; height: 300px;">
       <option ng-repeat="option in rightList track by $index" value="{{option}}">{{option | lowercase}}</option>
    </select>
</div>

Solution

Changing the way we built up the select list helped us out in the end: instead of using an ng-repeat on the option tag, we used ng-options on the select tag. This fixed the issue for us! The HTML of the directive looks like this now:

<div>
    <select ng-model="selectedLeft" multiple style="float: left; width:40%; height: 300px;" ng-options="option as option|lowercase for option in selected track by option">
    </select>
    <section style="float: left; padding: 10px;">
        <button ng-click="moveRight()" ng-disabled="selectedLeft.length < 1">>></button>
        <button ng-click="moveLeft()" ng-disabled="selectedRight.length < 1"><<</button>
    </section>
    <select ng-model="selectedRight" multiple style="float: left; width:40%; height: 300px;" ng-options="option as option|lowercase for option in rightList track by option">
    </select>
</div>

Hope this helps.