CODEWITHSUNDEEP
angularjsinternet-explorerselectdata-binding
devC
devC

Reputation: 1444

Select control data-binding doesnt work in IE9

I have a dropdown control data-bound as follows:

 <select name="trafficGroup" class="form-control input-sm"
                    ng-model="monitoringProbe.tdmCapture.selectedTDMCard.timeSlotProperties.trafficGroup"
                    required
                    ng-style="{'width':'100%'}"
                    ng-disabled="!monitoringProbe.tdmCapture.selectedTDMCard.isEditMode"
                    ng-if="monitoringProbeTDMCaptureData.trafficGroups.length > 0">
            <option value="{{tg.id}}"  ng-repeat="tg in monitoringProbeTDMCaptureData.trafficGroups" > {{tg.name}}</option>
            </select>

I explicitly set the value for monitoringProbe.tdmCapture.selectedTDMCard.timeSlotProperties.trafficGroup, as follows because otherwise its default value gets empty:

          if(tdmCapture.selectedTDMCard.timeSlotProperties.trafficGroup == 0)
                    tdmCapture.selectedTDMCard.timeSlotProperties.trafficGroup = app.meta.monitoringprobe.tdmCaptureTabData.trafficGroups[1];

This works fine in all browsers except in IE9. in IE9 what I see in dropdown is {{ tg.name }}

I added ng-if="monitoringProbeTDMCaptureData.trafficGroups.length > 0" to avoid this, but still the issue is there.

Any idea how to fix-it?

Upvotes: 0

Views: 821

Answers (1)

andrew.burk
andrew.burk

Reputation: 533

Instead of using ng-repeat with the option tag, you can use the ng-options attribute of the select directive. I'm not positive if this will resolve the issue you're seeing, but it's typically the better approach.

<select ng-options="tg.id as tg.name for tg in monitoringProbeTDMCaptureData.trafficGroups">
</select>

If you want the default value to be empty, you just include a single option tag with an empty value.

<select ...>
    <option value=""></option>
<select>

Upvotes: 2

Related Questions