ionicを試す ６日目 ラジオボタンで選択する (そしてイベントを起こす)
前回はインプットボックスで入力したデータで表示文字列を変更しました。
今回は複数の選択肢から一つを選ぶラジオボタンを試してみます。
ラジオボタンの名前に覚えがなくとも見たことはあるかと思います。
例
---------------------
〇 リンゴ
◎ バナナ
〇 みかん
---------------------
上の3つの果物の中から一つを選ぶ奴ですね。
ゲームブックの選択肢を選ぶページに使うと良い感じかもしれません。
インプットボックスでは通常のインプットボックスとionicコンポーネントのどちらを使うか悩みましたが、ラジオボタンについてはionicコンポーネントの使用になるかと思います。
機能やデザインもあるのですが、Angularの双方向バインディングの使用を考えると入力データの扱いが簡単になるのが魅力です。
ionicコンポーネントについては、公式から使用例のソースコードをコピーして使うのが早いかもしれません。
UIコンポーネント
https://ionicframework.com/docs/ja/components
ラジオボタン
https://ionicframework.com/docs/ja/api/radio
前回の"home.page.html"のインプットボックスの部分を削除して、上記サイトのサンプルコードを貼り付け、多少修正してみます。
ファイルをセーブして、ブラウザアプリの表示を見ましょう。
コマンドプロンプトを起動して以下の２つのコマンド入力してください。
(すでに起動しているならば不要です)
------------------------------------------
"cd c:\MyTest\test000"
"ionic serve"
------------------------------------------
インプットボックスの代わりにラジオボタンとその説明が表示されました。
ただ、チェックを付ける◎が右側に来ているのが、気にかかります。
ionicコンポーネントには、表示する順番を表す"slot"と言う属性があります。
ionicには他にも多くの独自属性があるのですが、"slot"属性は表示の順番を示し、これを"start"や"end"にする事で表示の順番を先頭(一番左)にしたり最後(一番右)にしたりできます。
（htmlの書き出し順よりも優先）
試しに、一番上のラジオボタンのみ'slot="start"'を入れて見ると、一番上だけがラジオボタンの位置が左端に変わりました。
確認できましたので、すべてのラジオボタンに'slot="start"'をつけましょう。
次に、ラジオボタンの選択の結果を上のテキストに反映させます。
これも5日目に出たAngularの双方向バインディングを使用します。
ただし、設定の場所は、タグ"ion-radio-group"の中です。
---------------------
<ion-radio-group [(ngModel)] = "dispText">
---------------------
これだけの変更で、変数"dispText"の中身が変更し、表示を書き換える事も出来ました。
もう少しラジオボタンの話が続きます。
現在、このブラウザアプリは立ち上がり時にどのラジオボタンも選択されていない状態です。
これを"home.page.ts"のコンストラクタ"Green"が選択された状態にしたいと思います。
(双方向バインディングの特性上、最初に表示される文字列も"Green"になる。）
---------------------
constructor() {
//表示文字列のセット
this.dispText = 'Green';
}
---------------------
これで最初に選択肢"Green"にチェックがつき、なおかつ表示テキストも"Green"になりました。
逆に、最初はどのラジオボタンにもチェックをつけたくない場合、どのラジオボタンの"value"にも無い値をセットすれば大丈夫です。
もう少し話が続きます。
ここまでは、結局、同じ変数を表示しているだけでAngularや"home.page.ts"に十分仕事をさせていませんでした。
今度はラジオボタンの値が変わった時に文字の色を変更してみたいと思います。
よくあるボタンを下に表示して、それをクリックするとい方法もありますが、ここではラジオボタンの変更時に、それを引き金として文字の色を変えてみます。
"home.page.ts"のコンストラクタの下に以下のコードを追加します。
---------------------
//ラジオボタン変更
fnChangeRadio(){
alert('値を変更しました');
}
---------------------
これは'値を変更しました'と言うアラート表示を出すだけの関数です。
そして"home.page.html"のラジオボタングループのタグ内に、ラジオボタンの選択が変わった時にこの関数"fnChangeRadio"が動くよう、コードを変更します。
------------------------------------------
<ion-radio-group [(ngModel)] = "dispText" (ngModelChange)="fnChangeRadio()">
------------------------------------------
変更したファイルをすべて保存して、ブラウザのアプリが更新されたら、ラジオボタンの選択を変えて見ましょう。
アラートのOKを押下すと、文字の表示が変わりますね。
また関数ですが値を渡して、それによって処理を変える事も出来ます。
(この値を引数と言います。複数の引数の場合もあります）
関数'fnChangeRadio'を次のように変更します。
------------------------------------------
//ラジオボタン変更
fnChangeRadio(testtext:string){
alert(testtext);
}
------------------------------------------
先ほどとは違い、引数として与えられた文字列をアラートに表示します。
ただし、これだけでは"home.page.html"のラジオボタングループの関数には、引数を渡すようになっていないのでVisualStudioCodeの"home.page.html"側も変更します。
------------------------------------------
<ion-radio-group [(ngModel)] = "dispText" (ngModelChange)="fnChangeRadio(dispText + 'に変更')">
------------------------------------------
これでラジオボタンの選択が変更した時に、例えば『青に変更』と言うように変更した色によりアラートが変わります。
なお、この書き方の場合、今選ばれているラジオボタンをクリックしてもアラートは表示されません。
("dispText"が変更していませんので)
その場合でもアラートを出したい場合は、"(ngModelChange)"ではなく"(click)"にすると選択が同じ時でもアラートが出ます。
"(click)"はボタン等につけることも多いので、出番はこちらが多いかもしれません。
文字の色の変更までは行きませんでしたが、キリが良いのでここまでにします。
注：
小さな変更ですが、コンストラクタで最初にセットする文字列の部分もコードを変えています。
---------------------
//最初に表示される文字列
initText='色を選んでください';
---------------------
これは定義の時に値をセットする変数宣言の方法です。
コンストラクタ内では
---------------------
//表示文字列のセット
this.dispText = this.initText;
---------------------
