作成者: xxoruioxx

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を少しは理解できればいいなっと感じました。

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

こんばんは。

今回はJavaScriptのデバックについて書いていきたいとおもいます。

JavaScriptは基本的に簡単なものしか作成したことしかありませんでした。

たとえばどんなのがあるかというと、jspかhtmlファイルのIDを使ってスタイルの変更を行うという処理です。

実際のソースはこんな感じになります。

xxxxx.html

・組み込みJSで直接呼び出している形になります。

inputタグでボタンに以下のようになっている場合が多いと思います。

onclick=ファンクション名（関数）

ファンクション名=style()

●JavaScript

基本的にclassタブで指定していることが多いので例として記載します。

this.style = function() ｛

getElementByClassName(取得したいclass名)

var 変数に格納した後スタイル変更する

｝

このような処理がモック作成等で結構使われています。

早速、デバックを貼ってみましょう。

この場合、F12を押しでデベロップツールで確認します。

ファンクション関数を記載してるところに左クリックをし、ブレーク文を指定します。

※ブレークの張り方は省きます。

ブレークした行に来た時に何を行なっているか分かります。

以上、簡単ではありますがデバックの仕方でした。

Javaであらゆるところで使用するリストについて書きたいと思います。

Listのnullチェックについて

どこでチェックするのって思う人もいると思うので例を記載します。

取得してきたAPIでレスポンス情報にリストが入っている場合があると思います。

この時に判定をしないでそのまま表示させようとすると、空のリストだった場合NullPointerExceptionが表示されます。

そのため、条件分岐をする必要があります。

取得できるリストはxxxListとします。

if(xxxList !＝ null ||xxxList.size != 0){
    //値が入ってたら処理を行う
}

このように判定することが出来ます。

以上、Listのチェックの仕方についてでした。

最後まで読んでいただきありがとうございました。