[하이브리드앱 ionic]시작해보기 9 - 라디오버튼 리스트 만들기

꼭 라디오버튼이 아니더라도,, ion-chip이나 ion-checkbox에도 활용할수 있다.

radio 버튼에서 주의할 점은 ion-radio-group으로 묶어주는 것과 ion-radio의 name을 통일시켜주는것!

 

 

test.page.html

<ion-list class="ctg-list">
    <ion-radio-group allow-empty-selection = "true" name="radio-group" #raduiGroup>
       <ion-item 
        *ngFor="let item of radio_list" 
        (ionSelect)="radioSelect($event)"
       >
         <ion-label>{{item.text}}</ion-label>
         <ion-radio 
            slot="start" 
            name="{{item.name}}" 
            value="{{item.value}}" 
            checked="{{item.checked}}" 
            color="{{item.color}}" 
            disabled="{{item.disabled}}"
         ></ion-radio>
       </ion-item>
    </ion-radio-group>
 </ion-list>

 

test.page.ts

 @ViewChild('radioGroup') radioGroup: IonRadioGroup

selectedRadioItem:any;

 radio_list = [
   {
     id: 'ctgRadio1',
     name: 'radio_list',
     value: 'ctg1',
     text: '카테고리1',
     disabled: false,
     checked: false
   }, {
     id: 'ctgRadio2',
     name: 'radio_list',
     value: 'ctg2',
     text: '카테고리2',
     disabled: false,
     checked: false
   }, {
     id: 'ctgRadio3',
     name: 'radio_list',
     value: 'ctg3',
     text: '카테고리3',
     disabled: false,
     checked: false
   }
 ];

 

 

 

참고사이트

 

https://www.freakyjolly.com/ionic-4-add-radio-lists-in-radio-group-example-and-tutorial/

Ionic 4 | Add Radio Lists in Radio Group Example and Tutorial | | Freaky Jolly