Angular 数据绑定 <select> 为空答案

【问题标题】：Angular data-bound <select> is emptyAngular 数据绑定 <select> 为空
【发布时间】：2014-08-11 01:17:04
【问题描述】：

以下是使用 AngularJS 绑定数据的下拉列表：

   <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>

我按如下方式填充 ng-options：

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

根据以下帖子，当 ng-model 中没有与下拉列表中的项目匹配的值时。 Why does AngularJS include an empty option in select?

因此我强制列表中的第一个元素为选中值，如下：

     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);
            }
        );

但下拉选择仍然是空的。在运行时是这样的：

<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>

这段代码有什么问题吗？

【问题讨论】：

试试tdmCapture.selectedTDMCard.layer1Properties.lineCode = monitoringProbeTDMCaptureData.lineCodes[0].id，你错过了.id，因为你在ng-option中提到了l.id as l.name

标签： angularjs data-binding

【解决方案1】：

由于您使用语法 "select as label for value in array" 在您的 ngoption ng-options="l.id as l.name for l in monitoringProbeTDMCaptureData.lineCodes" 您需要您的 ng-model 来保存默认选择的选定项目。但似乎您正在设置对象 ngModel。

尝试改变：-

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

到

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

您可能在模型中还缺少monitoringProbe？

【讨论】：

谢谢，PSL。我真的忽略了这一点。 monitorProbe - 这是在父工厂中声明的，并且是可访问的。