如何在角度中设置选择默认选项?

时间:2014-08-01 16:32:05

标签: javascript angularjs

所以我从服务器检索的json数据如下所示:

$scope.StateList = {"States": [
    {
        "Id": 1,
        "Code": "AL",
        "Name": "Alabama"
    },
    {
        "Id": 2,
        "Code": "AK",
        "Name": "Alaska"
    },
    {
        "Id": 3,
        "Code": "AZ",
        "Name": "Arizona"
    },
    {
        "Id": 4,
        "Code": "AR",
        "Name": "Arkansas"
    }]}

$scope.Address = {"Address": {
    "Address1": "123 Maple" ,
    "Address2": null,
    "City": "Tempe",
    "State": "AZ",
    "ZipCode": null,
    "Country": null,
    "Id": 0,
    "Latitude": 0,
    "Longitude": 0
}}

我设置了一个如下所示的选择:

  <select ng-model="Address.State">
    <option ng-repeat="template in StateList.States">{{template.Code}}</option>
  </select>

我需要能够将Address.State字段绑定到选定的值,作为select选项的初始值。我无法指出这一点,如果能告诉我我失踪的人,我将不胜感激。 Here is a plunker可以使用实时版本。

3 个答案:

答案 0 :(得分:3)

您可以使用ng-options指令和ngModel,让angular为您创建选项。试试这种方式: -

 <select ng-model="Address.Address.State" 
         ng-options="state.Code as state.Name for state in StateList.States"></select>

<强> Plnkr

基本上这使用语法

  

&#34;选择&#34; as&#34;标签&#34;为&#34;价值&#34; in&#34; array&#34;

答案 1 :(得分:0)

您可以使用PSL建议的ng-options,也可以使用选项的值属性

<option ng-repeat="template in StateList.States" 
       value="{{template.Code}}">{{template.Code}}</option>

PLUNKER LINK

答案 2 :(得分:0)

最好使用专门为选择下拉列表提供的ng-options绑定,而不是提供迭代的ng-repeat。以下标记将提供默认文本和下拉选项

<select ng-model='Address.State' ng-options="template.Code for template in StateList.States" >
    <option value=""> Select one </option>
</select>
相关问题