jeudi 16 février 2017

Enable select field when checkbox is checked

Inside a forloop, I have checkbox and select field. Select field is disabled by default. Whenever the user checks on the Checkbox, corresponding select field will be enabled.

Below is the code I am currently working with.

home.html

<ion-grid>
        <ion-row *ngFor="let item of extras" id="booking-enhancements-wrap-">
            <ion-col width-10>
                <ion-checkbox (ionChange)="onChange()" [(ngModel)]="enhancements[item.id].checked" ng-checked="enhancements[item.id].checked"></ion-checkbox>
            </ion-col>
            <ion-col width-70></ion-col>
            <ion-col width-20>
                <select [(ngModel)]="enhancements[item.id].qty" class="qty" disabled>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </ion-col>
        </ion-row>=
    </ion-grid>

home.ts

export class HomePage {

  extras: any;
  enhancements: any;

  constructor(public navCtrl: NavController, public http: Http) {
    this.http.get('http://ift.tt/2lVQBc7').map(res => res.json()).subscribe(response => {
        this.extras = response.Extras;
        this.enhancements = {};
        this.extras.forEach(item => {
          this.enhancements[item.id] = { checked: false, qty: 1 };
        })
    });
  }

  onChange(){
    var enhancements = this.enhancements;
    Object.keys(enhancements).forEach(function(key){
      if( enhancements[key].checked == true && enhancements[key].qty > 0 ){
        console.log( key + " | " + enhancements[key].checked );
      }
    });
  }

}




Aucun commentaire:

Enregistrer un commentaire