Pardha Pardha - 5 months ago 13
AngularJS Question

dropdown is not populating with json object

my ng-model value is - "{"Id":1,"Description":"Draft","Code":"Draft"}" and ng-options are -

"[
{
"Id": 1,
"Description": "Draft",
"Code": "Draft"
},
{
"Id": 2,
"Description": "UserSubmitted",
"Code": "UserSubmitted"
},
{
"Id": 3,
"Description": "PLMApproved",
"Code": "PLMApproved"
}].

so my dropdown is not populating(but value is binding).


I understatnd, if ng-model values is just a integer value it would bind, then how about json object?
Please help needed.

Answer

AFAIK it won't bind because your model is a different object i.e. points to a different memory location and it doesn't match with any objects inside the array.

You could use the as clause in ng-options to select a property you want to get into the ng-model and setting ng-model with that value will set the selected option.

e.g.

<select ng-options="item.Id as item.Description for item in default.items" ng-model="default.selectedItemId">
      <option value="">Select</option>
    </select>

else you could use the track by clause which is used when you want to get one property or object into your ng-model but you want to set the selected option with some another property from the ng-model which will be specified in the track by clause i.e. update binding from code to the view

e.g.

<select ng-options="item as item.Description for item in default.items track by item.Id" ng-model="default.selectedItem">
      <option value="">Select</option>
    </select>
Comments