I am working with an array of objects that have three properties:
attorneyId, attorneyName, and attorneyListattorneyList should be displayed as a dropdown menu. If both attorneyId = null and attorneyName = null, then the dropdown will only show Choose attorney. On the other hand, if either attorneyId != null or attorneyName != null (or both), the dropdown should display the values present in attorneyId and attorneyName.
To achieve this, I am creating an object called
selectedAttorney = {id:list.attorneyId, name:list.attorneyName}ng-model directive of the select element. Although the correct values are being captured in the selectedAttorney when changing the dropdown selection, the issue arises when there are pre-existing values for attorneyId and attorneyName; the dropdown does not pre-populate those values.
Here is the HTML:
<div ng-repeat='list in List'>
<div class="width-200" ng-init="selectedAttorney = {id:list.attorneyId, name:list.attorneyName}">
{{selectedAttorney}}
<select ng-model="selectedAttorney" ng-options="attorney.name for attorney in list.attorneyList">
<option value="">-- choose attorney --</option>
</select>
</div>
</div>
JS
$scope.List = [ {
"attorneyId": "3",
"attorneyName": "Robert",
"attorneyList": [
{ "id": 1, "name": "sue" },
{ "id": 2, "name": "anthony" },
{ "id": 3, "name": "Robert" },
{ "id": 4, "name": "George" },
{ "id": 5, "name": "Bruce" }
]
},
{
"attorneyId": null,
"attorneyName": null,
"attorneyList": [
{ "id": 1, "name": "sue" },
{ "id": 2, "name": "anthony" },
{ "id": 3, "name": "Robert" },
{ "id": 4, "name": "George" },
{ "id": 5, "name": "Bruce" }
]
}
];
Link to Plunker:
http://plnkr.co/edit/eqBkX0DNleiFmlO5sm7J?p=preview
Thank you for your help.