带有 ngModel 的选择框未填充所选值

Question

我有一个 JSON 响应数据，它是一个代表国家代码和描述的数组

 {"codeDescList":[{"desc":"Aruba"}],"codeValueCode":"ABW"},
 {"codeDescList":[{"desc":"Afghanistan"}],"codeValueCode":"AFG"},     
 {"codeDescList":[{"desc":"Angola"}],"codeValueCode":"AGO"},
 {"codeDescList":[{"desc":"Anguilla"}],"codeValueCode":"AIA"},
 {"codeDescList":[{"desc":"Åland Islands"}],"codeValueCode":"ALA"},  
 {"codeDescList":[{"desc":"Albania"}],"codeValueCode":"ALB"}

我将上述数组存储在 angularJS 范围对象中，如下所示

  $scope.codeValueData = response.data;

我为国家/地区创建了选择框

 <div class="form-group">
      <select ng-model="profileBizObj.preferredAddress.countryCode" ng-options="codeValue.codeDescList[0].desc for codeValue in codeValueData track by codeValue.codeValueCode">
    </select>
 </div>

选择框已正确创建，如下所示

<option value="ABW">Aruba</option>
<option value="AFG">Afghanistan</option>
<option value="AGO">Angola</option>
<option value="AIA">Anguilla</option>
<option value="ALA">Åland Islands</option>
<option value="ALB">Albania</option>

我的代码的问题是，如果 profileBizObj.preferredAddress.countryCode 指的是值“AGO”，则选择框未显示国家“安哥拉”。选择框显示为空白。

我是 angularJS 的新手。请帮助解决此问题。谢谢

Answer 1

使用ng-repeat 可以更轻松地实现您尝试做的事情。试试这个：

<select ng-model="profileBizObj.preferredAddress.countryCode">
      <option ng-repeat="item in codeValueData" value="{{item.codeValueCode}}">
           {{item.codeDescList[0].desc}}
      </option>
</select>

这是一个有效的小提琴：http://jsfiddle.net/5s0b0jnz/

Answer 2

在下面的选择语句对我有用

 <select ng-model="profileBizObj.preferredAddress.countryCode" ng-options="codeValue.codeValueCode as codeValue.codeDescList[0].desc for codeValue in codeValueData">

选择框填充为

<option value="0">Aruba</option>
<option value="1">Afghanistan</option>
<option value="2">Angola</option>
<option value="3">Anguilla</option>
<option value="4">Åland Islands</option>
<option value="5">Albania</option>

并且 Selectiong Angola 将作为“AGO”存储在模型“profileBizObj.preferredAddress.countryCode”中，这正是我需要的。

谢谢大家的帮助

Answer 3

你的 ng-options 是 ng-options="codeValue.codeDescList[0].desc for codeValue in codeValueData track by codeValue.codeValueCode">，这意味着，使用 codeValue 将绑定到模型，并且 ...desc 作为显示值。所以当你的模型值为AGO时，不能引用codeValueData中的某个对象。

你应该像AGO这样设置你的选项值：

ng-options="codeValue.codeValueCode as codeValue.codeDescList[0].desc for codeValue in codeValueData track by codeValue.codeValueCode">

然后codeValueCode 将应用于您的模型。反之，对于AGO这样的模型值，将选择相关选项。