30542

Radio-group on different ion-radio in same division angular 2 ionic 2

Question:

I have created an <strong>ion-grid radio-group</strong> in which there are <strong>ion-rows</strong> and in <strong>ion-rows</strong> there are 3 <strong>ion-cols</strong> in each <strong>ion-row</strong> and in last 2 ion-col I've put <strong>ion-radios</strong>.

like this

<ion-grid class = "DiscountOptions" radio-group> <ion-row style = "border: 1px solid; padding: 8px; background-color: #84AEF9"> <ion-col>Discount Options</ion-col> </ion-row> <ion-row> <ion-col>Pay 100% of fee now & get 25% discount</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> </ion-row> <ion-row> <ion-col>Pay 50% of fee now & get 15% discount</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> </ion-row> <ion-row> <ion-col>Pay 10% of fee now & get 10% discount</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;10.0%</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;10.0%</ion-col> </ion-row> <ion-row> <ion-col>Pay Later</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;0.0%</ion-col> <ion-col class = "euro"><ion-radio></ion-radio>&nbsp;&euro;0.0%</ion-col> </ion-row> </ion-grid>

<a href="https://i.stack.imgur.com/zouJp.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/zouJp.png" data-original="https://i.stack.imgur.com/zouJp.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Now as there is only one <strong>radio-group</strong>, one item will be selected from both columns. But I want 2 <strong>radio-group</strong> in one <strong>div</strong> to select one item from each column.

What should I do.

Answer1:

If you want to select one item from each column that time might be you have to set radio-group for each row and if you want to use two radio-group output will be something different.I guess you can try this.It can be your desired output.

<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <!--With the four radio-group if you want to select one item from the each column --> <div style="border: 1px solid; padding: 8px;"> <ion-grid> <ion-row style="border: 1px solid; padding: 8px; background-color: #84AEF9"> <ion-col>Discount Options</ion-col> </ion-row> </ion-grid> <ion-grid class="DiscountOptions"> <ion-row radio-group [(ngModel)]="choosedData1" (change)="selctedValue1($event)"> <ion-col>Pay 100% of fee now & get 25% discount</ion-col> <ion-col class="euro"> <ion-radio value="25.0%" checked="true"></ion-radio>&nbsp;&euro;25.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> </ion-row> <ion-row radio-group [(ngModel)]="choosedData2" (change)="selctedValue2($event)"> <ion-col>Pay 50% of fee now & get 15% discount</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> </ion-row> </ion-grid> <ion-grid class="DiscountOptions"> <ion-row radio-group [(ngModel)]="choosedData3" (change)="selctedValue3($event)"> <ion-col>Pay 100% of fee now & get 25% discount</ion-col> <ion-col class="euro"> <ion-radio checked="true"></ion-radio>&nbsp;&euro;25.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> </ion-row> <ion-row radio-group [(ngModel)]="choosedData4" (change)="selctedValue4($event)"> <ion-col>Pay 50% of fee now & get 15% discount</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> </ion-row> </ion-grid> </div> <!--With the two radio-group if you want to select one item from the each radio-group --> <div style="border: 1px solid; padding: 8px;"> <ion-grid> <ion-row style="border: 1px solid; padding: 8px; background-color: #84AEF9"> <ion-col>Discount Options</ion-col> </ion-row> </ion-grid> <ion-grid class="DiscountOptions" radio-group [(ngModel)]="choosedData5" (change)="selctedValue5($event)"> <ion-row> <ion-col>Pay 100% of fee now & get 25% discount</ion-col> <ion-col class="euro"> <ion-radio value="25.0%" checked="true"></ion-radio>&nbsp;&euro;25.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> </ion-row> <ion-row> <ion-col>Pay 50% of fee now & get 15% discount</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> </ion-row> </ion-grid> <ion-grid class="DiscountOptions" radio-group [(ngModel)]="choosedData6" (change)="selctedValue6($event)"> <ion-row> <ion-col>Pay 100% of fee now & get 25% discount</ion-col> <ion-col class="euro"> <ion-radio checked="true"></ion-radio>&nbsp;&euro;25.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;25.0%</ion-col> </ion-row> <ion-row> <ion-col>Pay 50% of fee now & get 15% discount</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> <ion-col class="euro"> <ion-radio></ion-radio>&nbsp;&euro;15.0%</ion-col> </ion-row> </ion-grid> </div> </ion-content>

Recommend

  • How to solve this error “this class is not key value coding compliant for the key”?
  • Error:Manifest Tasks does not support the manifestOutputFile property any more, please use the manif
  • Don't Display the Axis line in bar chart using core plot
  • Error when compiling with gradle (can't find downloaded dependencies)
  • You have not accepted the licenses arguments after run sdkmanager.bat --licenses - Android SDK
  • SDK 25.1.0 crash on CommitNow when call within onBackStackChanged(). Google Bug?
  • If statement operator being ignored?
  • PayPal REST API cross reference transaction with payment
  • Catalog Price Rules “Apply Rules” programmatically
  • Check overlap begin and end time by group in R
  • Paypal : invalid token only in DoExpressCheckoutPayment method
  • Braintree Dropin UI does not work with Ionic Framework unless force refresh
  • Change ListView font size in JavaFX
  • FIR filter in CUDA (as a 1D convolution)
  • How can I sum two different columns at once where one contains Decimal objects in pandas?
  • Unique SMS sender id?
  • is it possible to insert a line break in this tooltip?
  • How to add closing tag for canvas in three js rendered Canvas?
  • Cut the background to expose the layer below
  • Adjust width of select element according to selected option's width
  • How Lists (specifically, RecyclerView with CardViews) in Android work
  • How can I speed up CURL tasks?
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Custom validator control occupying space even though display set to dynamic
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • Change multiple background-images with jQuery
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Insert into database using onclick function
  • Encrypt data by using a public key in c# and decrypt data by using a private key in php
  • Deleting and Updating values from a cusrsor adapter
  • How reduce the height of an mschart by breaking up the y-axis
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Modifying destination and filename of gulp-svg-sprite
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Change an a tag attribute in JavaScript based on screen width
  • jquery mobile loadPage not working
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Android Google Maps API OnLocationChanged only called once