One of the bugs that was filed for an AngularJS part of our system was about a selectlist showing the binding in stead of the value for several options. As soon as stuff (options in this case) started moving around, it got even prettier…
I’ve tried several solutions like using ng-value in stead of value and using the fixIE() solution that roams the internet. Unfortunately all to no avail. In the end, a solution was found. 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 selectlists 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
In the end, changing the way we built up the select helped: in stead 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.