0
在forloop中,我有複選框和選擇字段。選擇字段默認爲disabled
。每當用戶選中複選框時,相應的選擇字段將爲enabled
。當勾選複選框時啓用選擇字段
下面是我目前使用的代碼。
home.html的
<ion-grid>
<ion-row *ngFor="let item of extras" id="booking-enhancements-wrap-{{ item.id }}">
<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>{{ item.name }}</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('https://www.example.com/hotels/11/').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);
}
});
}
}