Change Ion-Select Alert Label Text

Ionic Framework ionic-v3
1

Is there a way to change the alert label text for a ion-select instead of using the text inside the ion-option?

For example, suppose I have this array:

let opts = [
    {text: 'Key1', value: 1, abbreviation: 'K1'},
    {text: 'Key2', value: 2, abbreviation: 'K2'},
    {text: 'Key3', value: 3, abbreviation: 'K3'},
    {text: 'Key4', value: 4, abbreviation: 'K4'},
    {text: 'Key5', value: 5, abbreviation: 'K5'},
    {text: 'Key6', value: 6, abbreviation: 'K6'},
    {text: 'Key7', value: 7, abbreviation: 'K7'},
    {text: 'Key8', value: 8, abbreviation: 'K8'},
    {text: 'Key9', value: 9, abbreviation: 'K9'}
]

And this HTML

<ion-select>
    <ion-option *ngFor='let opt in options' [value]='opt'>{{opt.abbreviation}}</ion-option>
</ion-select>

This will have a select with options showing their abbreviation. When I click on the select, an alert will open with radio options with their label text being the abbreviation. In this example, is there a way to have the alert radio option labels show the text value instead of the abbreviation value?

2

I’m confused why you don’t want to just change {{opt.abbreviation}} to {{opt.text}}.

3

In the case I’m working with, the select would be small in width so the opt.text would be cut off with text overflow ellipsis.

4

The method is backwards from the way you describe your hope, but I think you can achieve the underlying goal like this:

<ion-select [selectedText]="selabbrev" (ionChange)="onProductSelected($event)">
<ion-option *ngFor="let prod of prods" [value]="prod">{{prod.text}}</ion-option>
</ion-select>

interface Product {
  text: string;
  value: number;
  abbrev: string;
}

selprod: Product;
selabbrev: string;

onProductSelected(prod: Product): void {
  this.selprod = prod;
  this.selabbrev = prod.abbrev;
}
5

That works! I used the [selectedText] and pointed it directly to the form value, since I used formcontrols, and it worked perfectly. Thank you so much!