Using an ngModel for a column's select options

Using Angular, I have created a table where a user selects a number from each cell. I'd like to add up all the values for each column and display the sum. I could do this by creating an ngModelfor each select however this would result in a large number of ngModels and get confusing pretty fast.

ngModel

select

ngModels

Is there a better way of achieving this like using the same ngModel with different indexes or a similar method?

ngModel

I have attached a StackBlitz for this issue.

1 Answer
1

Check my StackBlitz. I just created an object with multiple indexes. Each index represent a select in the table. Then I use the changemethod the get the selected value and update my model.

change

this.models = {
'Alert':1,
'Poised':1,
'Patient':1,
'Diligent':1,
'Doing':1,
'Childlike':1,
'Experiencing':1,
'Diversifying':1,
'Reserved':1,
'Serious':1,
};

valueChange(event,index) {
this.models[index] = Number(event.target.value);
console.log(this.models);
}

<select [innerHtml]="dropdown | safeHTML" (change)="valueChange($event,'Alert')"></select>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.