ionicを試す ９日目のソースコード
よく使う3つのファイルのソースコードです。
インデントを全角スペースに変換していますので、半角スペース2つに変換してお使いください。
場所は、"プロジェクトフォルダ\src\app\home"です。
home.page.html
---------------------------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<!-- Checkboxes in a List -->
<ion-list>
<ion-item *ngFor="let entry of form;index as index">
<ion-label>{{entry.val}}</ion-label>
<ion-checkbox slot="start" [(ngModel)]="entry.isChecked" (ngModelChange)="fnChangeCheck(index)"></ion-checkbox>
</ion-item>
</ion-list>
</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 form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: true }
];
fnChangeCheck(index:number){
alert(this.form[index].val+'が変更されました');
}
}
---------------------------------------------------------------
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;
}
---------------------------------------------------------------
