Angular data-bound <select> is empty

Question

Following is a dropdown data-bound with AngualarJS:

   <select name="lineCode" class="form-control input-sm"
        ng-model="monitoringProbe.tdmCapture.selectedTDMCard.layer1Properties.lineCode"
        ng-options="l.id as l.name for l in monitoringProbeTDMCaptureData.lineCodes"
                    required >
   </select>

I populate the ng-options as follows:

 virtualServerMonitoringProbeService.comboProperties().query({},{itemType:1, interfaceType: interfaceType}).$promise.then(
            function(result){
                monitoringProbeTDMCaptureData.lineCodes = result;
            },
            function(error){
                messageNotificationFactory.setNotification('error', error.data.message);
            }
        );

According to the following post, when there's no value in ng-model to match the items in the dropdown. Why does AngularJS include an empty option in select?

Therefore I force the first element in the list to be the selected value, as follows:

     virtualServerMonitoringProbeService.comboProperties().query({},{itemType:1, interfaceType: interfaceType}).$promise.then(
            function(result){
                monitoringProbeTDMCaptureData.lineCodes = result;
                tdmCapture.selectedTDMCard.layer1Properties.lineCode = monitoringProbeTDMCaptureData.lineCodes[0];
            },
            function(error){
                messageNotificationFactory.setNotification('error', error.data.message);
            }
        );

But still the dropdown selection is empty. At run time this is how it looks like:

<select name="lineCode" class="form-control input-sm ng-pristine ng-valid ng-valid-required" ng-model="monitoringProbe.tdmCapture.selectedTDMCard.layer1Properties.lineCode" ng-options="l.id as l.name for l in monitoringProbeTDMCaptureData.lineCodes" required="">
   <option value="?" selected="selected"></option>
   <option value="0">AMI</option>
    <option value="1">B8ZS</option>
</select>

Anything wrong with this code?

Try tdmCapture.selectedTDMCard.layer1Properties.lineCode = monitoringProbeTDMCaptureData.lineCodes[0].id, Youre missing .id SInce you have mentioned l.id as l.name in your ng-option — PSL
– PSL, Commented Aug 10, 2014 at 17:11

PSL · Accepted Answer · 2014-08-10 17:17:04Z

1

Since you are using the syntax "select as label for value in array" in your ngoption ng-options="l.id as l.name for l in monitoringProbeTDMCaptureData.lineCodes" You need your ng-model to hold the id of the selected item for default selection. But it seems like instead you are setting the object ngModel.

Try changing:-

    tdmCapture.selectedTDMCard.layer1Properties.lineCode = 
                   monitoringProbeTDMCaptureData.lineCodes[0];

to

 tdmCapture.selectedTDMCard.layer1Properties.lineCode = 
                    monitoringProbeTDMCaptureData.lineCodes[0].id;

Possible you are also missing monitoringProbe in the model?

answered Aug 10, 2014 at 17:17

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

devC Over a year ago

Thanks, PSL. I really had overlooked that. monitoringProbe - this is declared in the parent factory, and is accessible.

Collectives™ on Stack Overflow

Angular data-bound <select> is empty

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related