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

Question

So I have json data that is retrieved from the server that looks like this:

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

I set up a select that looks like the following:

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

I need to be able to get the Address.State field to be bound to the value selected, be the initial value of the select options. I have not be able to nail this one down and would be grateful for anyone who can show me what I am missing. Here is a plunker for a live version to work with.

Answer 1

What you can do is to use ng-options directive and an ngModel and let angular create the options for you. Try this way:-

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

Plnkr

Basically this uses the syntax

"select" as "label" for "value" in "array"

Answer 2

you can either use ng-options as suggested by PSL or you can use value attribute of options

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

PLUNKER LINK

Answer 3

It is preferred to use the ng-options binding provided specifically for select dropdowns instead of ng-repeat which provides for iteration. The below markup will provide the default text and the dropdown options

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