I am using a table with dynamic number of rows, each row which will have a combination of dropdowns as well as input text boxes. I am concerned on how to obtain the values of textboxes and dropdown specific to that corresponding row.
I have tried in obtaining the values for dropdowns like:
HTML:
<td>
<select class="custom-select" ng-model="selectionModel[row.number]"
ng-change="optionChanged(row.number, selectionModel[row.number])"
ng-options="choice.name for choice in possibleOptions track by choice.id">
</select>
</td>
JS:
$scope.selectionModel = {};
angular.forEach($scope.record, function(cus) {
$scope.selectionModel[cus.number] = $scope.possibleOptions.filter(function(opt) {
return opt.id === cus.option;
})[0];
});
function getUniqueValues(array, prop) {
return [...new Set(array.map(item => item[prop]))];
}
On the dropdown change, I have created a function that is capturing whether the value is changed or not, and store the changed value in an array. This is now working fine.
I am now little stuck on how to do the same for the text box. How do I get the values of text box individually with respect to table rows?
My text box looks like:
<td>
<input type="text" class="form-control" style="font-size:0.9rem !important;"
id="commentsId" placeholder="Comments" ng-model="comments"
ng-bind="row.comments"/>
</td>
Please guide.