Angular js ng-options无法设置值

Question

I have started playing around with angular js and here is the problem with ng-option .

I have a below DOM structure, where i have used ng-option inside ng-repeat . And i'm declaring Main model in ng-init

<div ng-init='Mainmodel="{"SelectedValue": "value1",
    "dummy" : [
     {
          "name" : "first attribute",
          "description" : "attribute first description",
          "values" : [{"id":"value1", "Name":"name1"}, {"id":"value2", "Name":"name2"}]
     },
     {
          "name" : "second attribute",
          "description" : "attribute second description",
         "values" : [{"id":"value1", "Name":"name1"}, {"id":"value2", "Name":"name2"}]
     }
    ]" >

<div ng-repeat="model in Mainmodel">
    <select ng-model="SelectedValue" ng-options="item.id as item.Name for item in Mainmodel.dummy.values">
    <option value=""> Please select </option>
</div>

</div>

The problem is, even thought the model SelectedValue is set to value1 the dropdwon is not selecting the model value. Dropdown is selected with Please select .

Can any one please tell where i'm doing wrong. As per my knowledge dropdwon will be selected with ng-model value.

Note : The above model structure is not accurate. Model is Valid dropdown is loading with all values.

Answer 1

The problem is in your ng-options . You are using item.id as item.Name for item in Mainmodel.values but item does not have a property id or Name . It has name , description and values . You need to iterate over the items in values .

You'll need to work around this probably using a combination of ng-repeat over ng-repeat without ng-options .

Something like:

<div ng-repeat="model in Mainmodel">
    <select ng-model="SelectedValue">
    <option value="">Make a choice</option>
    <div ng-repeat="item in Mainmodel.values">
    <option ng-repeat="subitem in item.values" value="{{subitem.id}}">{{subitem.Name}}</option>
    </div>
</div>

I am writing this from top of my mind. I have not tested, only trying to give you an idea.