AngularJSでの画面表示をng-modelとng-clickで行う。

AngularJSでmodelクラスとhtmlをバインドさせ、最終的に必要なレスポンス情報を書いていくことを目標に記載していきます。

AngularJSのリファレンスで値の保持とhtmlとの双方向バインドで使うng-modelについて、説明を書いていきたいと思います。

そもそも、この記事を書こうとした理由としてjsで保持している値にどうやってバインドさせるか等書いていなかったので忘れないように書きたいと思います。

以下のサンプルはどちらかというと【JavaScript】のやり方になります。

Var sample = {
    xxxx:false, //フラグの場合
    bbbb:''     //文字列の場合
}




変数定義したものをng-modelでバインドさせた値に格納する必要があります。

上記を踏まえた上でのサンプルを書いていきます。

〇静的の場合

html

<!--チェックボックスをng-modelの値を単純に使う場合-->
<!--フラグを追加するときxxxxにフラグを追加することが出来ます-->
<input type=checkbox ng-model='value.xxxx'>
<!--配列をループしてng-modelの値を表示する場合-->
<div ng-repeat='value.name'>
    <lavel><span><input type=checkbox/>{{value.name}}</span></lavel>
</div>

js（※APIから返されたJSONイメージになります）

//valueの値をコードと紐付ける
this.value = {
    this.name = [
    {
        サンプル
    },
    {
        サンプル2
    },
    {
        サンプル3
    },
    ]
}

この場合は単純にvalueの値を表示している状態です。

〇動的の場合

html

<!--リファレンスのng-clickを使います-->
<lavel><span><input type=checkbox ng-model='sample.xxxx' ng-click='click'/>{{sample}}<span></lavel>
<!--sample.xxxxがtrueの場合に表示する -->
<lavel ng-show='sample.xxxx'>

js

this.click = function() {
    //フラグを反転させたい場合
    $scope.sample.xxxx = !xxxx;
    //変数自体の形をBoolean型にしてからtrueを設定する
    $scope.sample.xxxx = true;
    //値を格納したい場合→この場合インクリメントさせる
    $scope.sample.bbbb = $scope.sample.bbbb + 1
}

フラグを例にすると反転させることによってng-showを使って表示させたりできます。

まとめ

*JavaScript系の自由言語には、人によって書き方が異なるのであくまでも参考にしてください。

また、上記で説明してきた情報でAngularJSを少しは理解できればいいなっと感じました。

〇本ページで学べること
画面表示と値をバインドできます。少しでも参考になれば幸いです。また、間違っていましたら、コメント頂けると助かります。