CODEWITHSUNDEEP
javascripthtmlangulartypescriptngfor
Daniele Vallorani
Daniele Vallorani

Reputation: 73

multiple selects select the same option

In my project, i have a table where various interventions are inserted based on previous selections. In case of more interventions, on the select if I go to select a value on the first intervention, it will also change on the second intervention. How can I make selections independent?

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<table class="table table-hover table-bordered table-striped" style="display: contents;">
  <caption></caption>
  <thead style="background:#ce5e59; color: white;">
    <tr>
      <th scope="colgroup">Interventions:</th>
      <th scope="colgroup">Surface Type:</th>
      <th scope="colgroup">Price:</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let element of intervention; index as j">
      <tr>
        <td>{{element.int.code}}</td>

        <td>
          <select multiple [(ngModel)]="surface_type">
            <option selected disabled [value]="0">Select</option>
            <option [value]="1" [attr.disabled]="element.priceVis === 0 ? 'disabled' : null">Visible Surface</option>
            <option [value]="2" [attr.disabled]="element.pricePlast === 0 ? 'disabled' : null">Plastered Surface</option>
            <option [value]="3" [attr.disabled]="element.priceBoth === 0 ? 'disabled' : null">Both Surface</option>
          </select>
        </td>

        <td *ngIf="surface_type == 0"></td>
        <td *ngIf="surface_type == 1">{{element.priceVis}}€/{{element.unit}}</td>
        <td *ngIf="surface_type == 2">{{element.pricePlast}€/{{element.unit}}</td>
        <td *ngIf="surface_type == 3">{{element.priceBoth}}€/{{elemento.unit}}</td>
      </tr>
    </ng-container>
  </tbody>
</table>

intervention: Intervention[] = []
surface_type: number: 0

Upvotes: 0

Views: 331

Answers (3)

therceman
therceman

Reputation: 269

As noted by Erik, you need to have your ngModel be an array:

<select multiple [(ngModel)]="surface_types[j]">

And secondly - you need to import FormsModule package into your Angular module:

import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
         FormsModule      
    ]

I've created Sandbox on Stackblitz, you can inspect that:

https://stackblitz.com/edit/angular-qsxgaz?file=src%2Fapp%2Fproduct-list%2Fproduct-list.component.html

Upvotes: 1

Adarsh Mohan
Adarsh Mohan

Reputation: 1384

<option [value]="1" [attr.disabled]="element.priceVis === 0 ? 'disabled' : null">Visible Surface</option>

[] as an attribute will be a one way binding of data with the variable that comes inside the ""

so, for your case [value]="1" means you are assigning a variable 1 to the value attribute, and not the value 1 to value attribute.

for that to happen, you have to write as

value="1"

so finally, your code should look like

<option value="1" [attr.disabled]="element.priceVis === 0 ? 'disabled' : null">Visible Surface</option>

You will have to make the similar changes on all the option tags to make this work.

Please check the docs of angular's property binding for more details.

Also

For the variable surface_type is the same for all the loops. so you will either have to change that to an array just like what Erik commented. or you will have to keep a variable surface_type on each of the object inisde intervention array. and replace every insance to

element.surface_type

Your interface Intervention should look something like this

interface Intervention {
   ... your objects ...
   surface_type: number|string

}

Upvotes: 1

Erik
Erik

Reputation: 867

The <select> elements you generate all store their selected value in the surface_type variable. You could change surface_type into an array by changing the ngModel statement into: [(ngModel)]="surface_type[j]" Where I use the j index from your *ngFor.

Upvotes: 1

Related Questions