0
私はバスチケット予約のionic appを開発しています。私のアプリには、ユーザーが旅行の座席を選択できるページがあります。私の実際の問題は、いくつかの条件からこれらのシート（チェックボックス）を無効にすることです。これらの座席はデータベースからロードされます.3つのプロパティを持つオブジェクトです。 「番号」、「ステータス」および「チェック」を含む。条件は以下の通りです：複数の条件からチェックボックスを無効にする
- 「状態」プロパティがfalseの場合、自動的にシートを無効にします。
- シートが選択されるたびに、checkプロパティをtrueに設定する関数を呼び出し、選択したチェックの数を数えます。 ボックス。選択されたボックスの数が定義済みの "制限" 変数と等しい場合、falseの "check"属性を持つすべてのチェックボックスは無効になります。
問題は、彼らが別々であるが、合併したとき、彼らはもはや機能していない場合、これらの2つの条件が完全に動作することです。条件はこれから得たfiddle project
座席はtsの関数から生成されます。上記の条件は、試験目的のために最初に生成された座席列にのみ適用された。他の行のみが第一の条件は、ここで彼らに
を適用している私は問題が無効になってチェック条件をチェックボックスのために追加さだと思うソースコード
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Loading, LoadingController, Platform } from 'ionic-angular';
import { BusProvider } from '../../providers/bus/bus';
import firebase from 'firebase';
@IonicPage({
name: 'bus-plan'
})
@Component({
selector: 'page-bus-plan',
templateUrl: 'bus-plan.html',
})
export class BusPlanPage {
seatList = [];
busSeats = firebase.database().ref('/agency/bus/0/seats');
public loading: Loading;
person: any;
public ticketdata = {
departure: '',
destination: '',
date: '',
hour: '',
adult: 0,
children: 0,
class: '',
}
booked = false;
backSeats = [65, 66, 67, 69, 70];
public BusSize = {
line1: [],
line2: [],
line3: [],
line4: [],
}
limit = 3;
checked = 0;
constructor(public navCtrl: NavController, public platform: Platform, public loadingCtrl: LoadingController, public navParams: NavParams) {
console.log(this.limit)
this.getBookingData();
}
ionViewWillEnter() {
this.busSeats.once('value', snapshot => {
this.seatList = snapshot.val();
}).then(seat => {
if (seat)
this.initArrays();
else
console.log("error")
}).catch(error => {
console.log(error)
});
}
checkLimit(a, b) {
if (a && b)
return true
else
return false
}
controlCbx(seat) {
console.log(seat.check)
seat.check = !seat.check
if (seat.check)
this.checked++
else
this.checked--
console.log(this.checked)
}
initArrays() {
var s1 = 15;
var s2 = 31;
var s3 = 47;
for (var i = 0; i <= 16; i++) {
this.BusSize.line1[i] = this.seatList[i - 1];
}
console.log(this.seatList)
for (var j = 0; j <= 16; j++) {
this.BusSize.line2[j] = this.seatList[j + 15];
}
for (var m = 0; m <= 16; m++) {
this.BusSize.line3[m] = this.seatList[m + 31];
}
for (var k = 0; k <= 16; k++) {
this.BusSize.line4[k] = this.seatList[k + 47];
}
this.BusSize.line1.shift();
this.BusSize.line2.shift();
this.BusSize.line3.shift();
this.BusSize.line4.shift();
this.BusSize.line4.map((obj) => {
obj.check = false;
return obj;
});
this.BusSize.line4.map((obj) => {
obj.check = false;
return obj;
});
this.BusSize.line3.map((obj) => {
obj.check = false;
return obj;
});
this.BusSize.line2.map((obj) => {
obj.check = false;
return obj;
});
this.BusSize.line1.map((obj) => {
obj.check = false;
return obj;
});
console.log(this.BusSize)
}
disableCbx() {
let x = window.document.getElementById('checkbox');
x.setAttribute
}
getArraysValue1(val) {
return this.BusSize.line2[val].number;
}
getArraysValue2(val) {
return this.BusSize.line3[val].number;
}
getArraysValue3(val) {
return this.BusSize.line4[val].number;
}
getBookingData() {
this.ticketdata.departure = this.navParams.get('departure');
this.ticketdata.destination = this.navParams.get('destination');
this.ticketdata.date = this.navParams.get('date');
this.ticketdata.hour = this.navParams.get('hour');
this.ticketdata.adult = this.navParams.get('adult');
this.ticketdata.children = this.navParams.get('children');
this.ticketdata.class = this.navParams.get('class');
this.person = this.navParams.get('children') + this.navParams.get('adult');
console.log(this.ticketdata)
}
goToConfirm(): void {
this.navCtrl.push('confirmation', {
'departure': this.ticketdata.departure,
'destination': this.ticketdata.destination,
'date': this.ticketdata.date,
'hour': this.ticketdata.hour,
'children': this.ticketdata.children,
'adult': this.ticketdata.adult,
'class': this.ticketdata.class,
});
console.log(this.ticketdata)
}
ionViewDidLoad() {
}
stringToBoolean(string) {
switch (string.toLowerCase().trim()) {
case "true": case "yes": case "1":
return true;
case "false": case "no": case "0":
return false;
default:
return Boolean(string);
}
}
}<ion-header no-border>
<ion-navbar hideBackButton=false color="transparent-20">
<ion-title>
<span class="title">Select your seats</span>
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div id="key">
<div id="available" class="keyseats"></div>
<div>Available</div>
<div id="selected" class="keyseats"></div>
<div>Selected</div>
<div id="booked" class="keyseats"></div>
<div>Booked</div>
</div>
<div class="cabin">
<ion-grid class="row">
<!-- Row 1 from 1-16 -->
<div style="position:relative; width:2.7em;" *ngFor="let seats of BusSize.line1; let i = index" id="row1">
<ion-col class="seat">
<input class="checkbox" type="checkbox" (change)="controlCbx(seats)" value="{{seats.number}}" id="{{seats.number}}" [disabled]="(seats.status=='false' checked==limit && !BusSize.line1[i].check) ? true : false "
/>
<label class="seatlabel" for="{{seats.number}}">{{seats.number}}</label>
</ion-col>
</div>
<!-- Row 2 from 17-32 -->
<div style="position:absolute; margin-left: 1em;">
<div style="position:relative; width:2.7em; margin-left: 3em;" *ngFor="let seats of BusSize.line2" id="row2">
<ion-col class="seat">
<input type="checkbox" value="{{seats.number}}" id="{{seats.number}}" ng-model="num" [disabled]="!stringToBoolean(seats.status)"
/>
<label class="seatlabel" for="{{seats.number}}">{{seats.number}}</label>
</ion-col>
</div>
</div>
<!-- Row 3 from 33-48 -->
<div style="position:absolute; right: 0; margin-right: 5.7em;">
<div style="position:relative; width:2.7em;" *ngFor="let seats of BusSize.line3" id="row3">
<ion-col class="seat">
<input type="checkbox" value="{{seats.number}}" id="{{seats.number}}" ng-model="num" [disabled]="!stringToBoolean(seats.status)"
/>
<label class="seatlabel" for="{{seats.number}}">{{seats.number}}</label>
</ion-col>
</div>
</div>
<!-- Row 4 from 49-64 -->
<div style="position:absolute; right: 0; margin-right: 1.6em;">
<div style="position:relative; width:2.7em;" *ngFor="let seats of BusSize.line4" id="row4">
<ion-col class="seat">
<input type="checkbox" value="{{seats.number}}" id="{{seats.number}}" ng-model="num" [disabled]="!stringToBoolean(seats.status)"
/>
<label class="seatlabel" for="{{seats.number}}">{{seats.number}}</label>
</ion-col>
</div>
</div>
<!-- Row 5 from 65-69 -->
<ion-row id="row5" class="seats">
<ion-col *ngFor="let seats of backSeats;" class="seat seat2">
<input (change)='test()' type="checkbox" value="{{seats}}" id="{{seats}}" />
<label for="{{seats}}">{{seats}}</label>
</ion-col>
</ion-row>
</ion-grid>
</div>
<button ion-button block (click)='goToConfirm()' icon-right color="light">
CONFIRM <ion-icon ios="ios-checkmark" md="md-checkmark"></ion-icon>
</button>
</ion-content>