'How can I have a different ngModel for each row of a data table dropdown?
The following is my HTML.
<tr>
<th>
Test Data
</th>
<th>
Test Data Options
</th>
</tr>
<tr>
<td>
<ng-container>
{{data.testData}}
</ng-container>
</td>
<td class="text-base font-normal">
<ng-container>
<p-dropdown [options]="data.testDataOptions" optionLabel="testDataOptionLabel" optionValue="testDataOptionValue" placeholder="Select Test Data"></p-dropdown>
</ng-container>
</td>
</tr>
This is my JSON file.
“data”: [
{
“testData”: “Test Data A”,
“testDataOptions”: [
{
“testDataOptionValue”: “Test Data A1 Option”,
“testDataOptionLabel”: “Test Data A1”
},
{
“testDataOptionValue”: “Test Data A2 Option”,
“testDataOptionLabel”: “Test Data A2”
}
],
},
{
“testData”: “Test Data B”,
“testDataOptions”: [
{
“testDataOptionValue”: “Test Data B1 Option”,
“testDataOptionLabel”: “Test Data B1”
},
{
“testDataOptionValue”: “Test Data B2 Option”,
“testDataOptionLabel”: “Test Data B2”
}
],
}
If I want to save the selected values of the value of each dropdown in each of the row what should I be doing?
For example
I would want to save the selected options into an array and pass it into a JSON in the following.
Selected option value for row 1: Test Data A1 Option
Selected option value for row 2: Test Data B2 Option
"selectedOptions": [
{
"selectedValue": "Test Data A1 Option"
},
{
"selectedValue": "Test Data B2 Option"
}
]
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

