Change radio-group to select dropdown menu

Ionic Framework ionic-v3
1

I want to change radio-group to select . how can i ?

my html code:

								<div *ngIf="(attr.name|uppercase)!='COLOR'" [ngClass]="(attr.name|uppercase)=='SIZE' ? 'attribute-size':'attribute-default'">
						<div text-uppercase><b dark>{{attr.name}}</b></div>
						<ion-list mode="md" overflow radio-group [(ngModel)]="attributes[attr.name].option" (ngModelChange)="getVariation()">
							<ion-item float-left *ngFor="let option of attr.options" no-padding>
								<ion-label [attr.text-center]="(attr.name|uppercase)=='SIZE'?true:null">{{option}}</ion-label>
								<ion-radio [value]="(option|lowercase)"></ion-radio>
							</ion-item>
						</ion-list>
					</div>
2

Take your time to explore the components docs, all cross-plaform view tools are there.

[https://ionicframework.com/docs/components/#overview]

I think you’re looking for ion-select, to make checkboxes or so.

          <ion-item>
            <ion-select okText="Ok" cancelText="Annuler" [(ngModel)]="customerFullName" required>
                  <ion-option *ngFor="let customer of customers | async" value="{{customer?.first_name}} {{customer?.last_name}} {{customer?.key}}">{{customer?.first_name}} {{customer?.last_name}}</ion-option>
            </ion-select>
          </ion-item>

Have fun with ionic,

1 Like