ionicを試す １４日目のソースコード
よく使う3つのファイルのソースコードです。
インデントを全角スペースに変換していますので、半角スペース2つに変換してお使いください。
場所は、"プロジェクトフォルダ\src\app\home"です。
home.page.html
---------------------------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<table class="table" border="1">
<tr>
<th>取消</th>
<th>オーダー</th>
<th>注文</th>
<th>メニュー</th>
</tr>
<tr *ngFor="let entry of Menu; index as index">
<td><ion-checkbox [id]="'chkOrder' + index" *ngIf="Order.length > index" (mousedown)="fnChangeOrderCheck(index, $event)"></ion-checkbox></td>
<td><span *ngIf="Order.length > index">{{Order[index].val}}</span></td>
<td><ion-checkbox [id]="'chkMenu' + index" (click)="fnChangeMenuCheck(index)"></ion-checkbox></td>
<td>{{entry.val}}</td>
</tr>
</table>
Order配列の要素数：{{Order.length}}
</div>
</ion-content>
---------------------------------------------------------------
home.page.ts
---------------------------------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-page-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
//メニュー配列
public Menu = [
{ val: 'ナポリ風', category_id: '00', category_name: '生地', sub_id: '01' },
{ val: 'クリスピー', category_id: '00', category_name: '生地', sub_id: '02' },
{ val: 'アメリカン', category_id: '00', category_name: '生地', sub_id: '03' },
{ val: 'トマトソース', category_id: '01', category_name: 'ソース', sub_id: '01' },
{ val: 'ホワイトソース', category_id: '01', category_name: 'ソース', sub_id: '02' },
{ val: 'バジルソース', category_id: '01', category_name: 'ソース', sub_id: '03' },
{ val: 'ソースレス', category_id: '01', category_name: 'ソース', sub_id: '04' },
{ val: 'ペパロニ', category_id: '02', category_name: 'トッピング', sub_id: '001' },
{ val: 'オニオン', category_id: '02', category_name: 'トッピング', sub_id: '002' },
{ val: 'トマト', category_id: '02', category_name: 'トッピング', sub_id: '003' },
{ val: '照り焼きチキン', category_id: '02', category_name: 'トッピング', sub_id: '004' },
{ val: 'ダブルチーズ', category_id: '02', category_name: 'トッピング', sub_id: '005' },
{ val: 'コーラ', category_id: '03', category_name: 'サイドメニュー', sub_id: '001' },
{ val: 'ウーロン茶', category_id: '03', category_name: 'サイドメニュー', sub_id: '002' },
{ val: 'サラダ', category_id: '03', category_name: 'サイドメニュー', sub_id: '003' },
{ val: 'ポテト', category_id: '03', category_name: 'サイドメニュー', sub_id: '004' },
{ val: 'アイス', category_id: '03', category_name: 'サイドメニュー', sub_id: '005' }
];
//オーダー配列(初期状態は空)
public Order = [
];
//メニュー配列チェック
fnChangeMenuCheck(index:number){
//該当する要素を文字列化して
let strObj = JSON.stringify(this.Menu[index]);
//その文字列から新規にオブジェクトtmpObjを作成
let tmpObj = JSON.parse(strObj);
//tmpObjのcategory_idとsub_idの組み合わせが、Order配列に存在するかを調べる。
const intExistIndex = this.Order.findIndex((u) => (u.category_id + u.sub_id)=== (tmpObj.category_id + tmpObj.sub_id));
let el = document.getElementById('chkMenu'+index) as HTMLInputElement;
//この時点ではチェックボックスの変更反映していない(すなわち真偽が逆)
if(!el.checked){
//チェックがついていて、そのアイテムがOrder配列に無ければ追加する
if(intExistIndex == -1){
//ただしtmpObjのcategory_idが'00'あるいは'01'の場合は同じcategory_idのアイテムを追加してはいけない
if(tmpObj.category_id == '00' || tmpObj.category_id == '01'){
//tmpObjのcategory_idが、Order配列に存在するかを調べる。
const intExistIndex2 = this.Order.findIndex((u) => (u.category_id)=== (tmpObj.category_id));
if(intExistIndex2!=-1){
el.checked = true;
alert(this.Menu[index].category_name + "は、一つしか選べません");
return;
}
}
//そのオブジェクトをOrder配列の末尾に追加
this.Order.push(tmpObj);
}
}else{
//チェックが外され、そのアイテムがOrder配列にあれば削除
if(intExistIndex != -1){
this.Order.splice(intExistIndex,1);
}
}
}
//オーダー配列チェック
fnChangeOrderCheck(index:number, $event:Event){
//該当する要素を文字列化して
let strObj = JSON.stringify(this.Order[index]);
//その文字列から新規にオブジェクトtmpObjを作成
let tmpObj = JSON.parse(strObj);
//tmpObjのcategory_idとsub_idの組み合わせが、Menu配列に存在するかを調べる。
const intExistIndex = this.Menu.findIndex((u) => (u.category_id + u.sub_id)=== (tmpObj.category_id + tmpObj.sub_id));
let elMenu = document.getElementById('chkMenu'+intExistIndex) as HTMLInputElement;
elMenu.checked = false;
this.Order.splice(index,1);
//チェックボックスをクリックしたので、そのままだとチェックがつく。あらかじめつけておけばチェックが外れる
let elOrder = document.getElementById('chkOrder'+(index)) as HTMLInputElement;
elOrder.checked = true;
}
}
---------------------------------------------------------------
home.page.scss
---------------------------------------------------------------
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 2o0px;
line-height: 1.5;
color: black;
margin: 0;
}
#container a {
text-decoration: none;
}
---------------------------------------------------------------
