angularjs ng-repeat causing issues in ie9
|April 29, 2014||Posted by forumadmin under TechQns||
I built this jsfiddle to demonstrate the issue that I’m having:
There are 2 copies of the same control in this page, one outside the repeat (as the control) and one in the repeat as the test.
I know that there are scope issues, you can delete the top control and the issues still exist
To reproduce the issue, type “b” into the first Search box. The top control set will filter to only show
Bill, while the bottom control set will only show
Now, if you select
John, he magically changes to
Bill to the right box will also cause just the first letter to appear. Selecting
Bill in the right box magically brings the rest of his name into focus.
The control looks like this:
<div class="select"> <label class="control-label" for="multiSelectSelected">Available</label> <div> <table style="width: 100%"> <tr> <td>Search:</td> <td> <input ng-model="searchText" class="form-control" /> </td> </tr> </table> </div> <select multiple class="form-control" id="multiSelectSelected" name="multiSelectSelected" ng-model="selected.available" style="height: 175px" ng-options="e as e[displayAttr] group by e[groupAttr] for e in available | filter:searchText"></select> </div> <div class="select buttons"> <button type="button" class="btn mover left" ng-click="add()" ng-disabled="selected.available.length == 0"> <i class="glyphicon glyphicon-arrow-right"></i> </button> <button type="button" class="btn mover right" ng-click="remove()" ng-disabled="selected.current.length == 0"> <i class="glyphicon glyphicon-arrow-left"></i> </button> </div> <div class="select"> <label class="control-label" for="multiSelectAvailable">Selected</label> <select multiple class="form-control" id="multiSelectAvailable" name="multiSelectAvailable" ng-model="selected.current" style="height: 211px" ng-options="e as e[displayAttr] group by e[groupAttr] for e in model"></select> </div>
This issue only exists with IE9 and bellow
FireFox and IE11 both do not have this issue.
What do I need to change to get this working on IE8 and IE9? Unfortunately, I need to support those two browsers…
BTW, the multiselect box code was derived from this tutorial: http://blog.boxelderweb.com/2013/08/22/angularjs-multi-select-widget/
|Asked By – joe_coolish||Read Answers|