jeudi 29 novembre 2018

Check a radio button dynamically in ionic 3

Hi Guys I have this Json Response below which I have consoled: JSON Response

I want to check/pre-select the ion-radio and ion-checkbox if the value of DEFAULT is equal to Y. I had no luck finding a solution. This are the files:

my html file

  <ion-list *ngFor = "let title of data" >
      <ion-row  radio-group name="radio" [(ngModel)]="sortby">
        <ion-item>
          <p></p>
        </ion-item> 
        <ion-col *ngIf = 'title.TYPE !== "INC";else checkb'>
          <div  *ngFor = "let customItems of title?.DET; let i = index;">
          <ion-item *ngIf = 'customItems.DEFAULT !== "Y";else redcheck'>

            <ion-label></ion-label>
            <ion-radio (ionSelect)="selectRad(customItems)" [value]="customItems"></ion-radio>

          </ion-item>
          <ng-template #redcheck>
              <ion-item>

                  <ion-label></ion-label>
                  <ion-radio (ionSelect)="selectRad(customItems)" [value]="customItems"  [checked]="i==0"></ion-radio>

                </ion-item>
          </ng-template>
        </div>
        </ion-col>
        <ng-template #checkb>
            <ion-col>
                <ion-item  *ngFor = "let customItems of title?.DET">
                    <ion-label></ion-label>
                    <ion-checkbox [(ngModel)]="customItems.checked" (ngModelChange)="selectCat(customItems,$event)"></ion-checkbox>
                </ion-item>
              </ion-col>
        </ng-template>
      </ion-row>
      <ion-buttons end>
        <button ion-button (click) = "submitCustomisation()">
          Save
        </button>
      </ion-buttons>
    </ion-list>

my ts file methods are

 submitCustomisation(){

    this.result=this.selectedArrayCust;

    this.resultRad = this.custValue;
    console.log("Vlue check",this.resultRad);
   console.log("checkstorage",this.result);
  }

  selectCat(data){
    if (data.checked == true) {
      this.gotta = this.selectedArrayCust.push(data)
       //localStorage.setItem('cuisinearray',this.gotta);
     } else {
      this.selectedArrayCust.pop(data)
      let newArray = this.selectedArrayCust.filter(function(el) {
        return el !== data;
     });
      this.selectedArrayCust = newArray;
    }
    console.log("From CheckBox",this.selectedArrayCust);
   }

   selectRad(data){
    console.log("Radio data",data);
    this.custValue = data;
 }

To make it more clear I have added a screenshot of the app App Screenshot. In this case Patal & Sukhi and Pav (2 pieces) have a DEFAULT value of Y and I want to select/check these two options.




Aucun commentaire:

Enregistrer un commentaire