mdb-select show custom value based on selected options

Topic: mdb-select show custom value based on selected options

Taher hendawi asked 5 years ago

Hi,I have to mdb-select element in a table for each row and I need to show the number of selected options for each row.

In other words: I need each table row to have a cell containing a select element and after I select the options, it should show me, how many selections in that cell I have done!

changeFruitsForRow(selectedFruits: any, idx: number){
  // create Fruit array of the selected options 
  const newFruits: Fruits[] = getFruitsOfSelection(selectedFruits);
  // update row fruits
  this.rows[idx].fruits = selectedFruits;
}
class Row{
  id: string;
  fruits: Fruits[];
}
class Fruits{
  id: string;
  name: string
}

The html template:

 <tr mdbTableCol *ngFor="let r of sim.rows">
  <td> 
    <mdb-select [(ngModel)]="r.fruits.lenght" [multiple]="true"
                [options]="fruits"
                (changed)="changeFruitsForRow($event, r.idx)"
                >
    </mdb-select>
  </td>
 ..
 </tr>

I tried also the "(selected)="optionSelected($event)" and "(deselected)="optionDeselected($event)" events but did not help.

Arkadiusz Idzikowski staff commented 5 years ago

Can you provide a more detailed example?

Taher hendawi commented 5 years ago

I have edited the post.

Taher hendawi commented 5 years ago

@Arkadiusz Idzikowski Is that detailed enough?

Add comment

Arkadiusz Idzikowski staff answered 5 years ago