AngularJSを速攻吸収する方法 #2

book-944462_1280
LINEで送る
Share on GREE
Share on LinkedIn

AngularJSを使ってみて思ったんだが、ng-**というアトリビュートの扱いが独特なのだが、{{**}}という記述は、正規表現を使って文字列置換させているのだろうか?
だとすると、一度ページを読み込んで置換しているんだとすると、少し効率が悪いような気がするんだが、そんなベタな事はやってないだろう。
ライブラリを解析するのは、もう少し後でやるとしよう。

今回は、前回の続きを行う。
前回は、リピートやフィルタ処理の簡単な使い方を書いたので、dotinstallをベースにその続きをお勉強した備忘録とソースコードを記載する。

関連サイト

前回記事

AngularJSを速攻吸収する方法 #1

本家サイト

https://angularjs.org/

dotinstall

http://dotinstall.com/lessons/basic_angularjs

今回の勉強の目次

  1. コントローラのネストとイベント
  2. form関連

コントローラのネストとイベント

ソースコード

解説

myScript.jsには「mainCtrl」と「userItemCtrl」を別のfunctionで記述しているのだが、AngularJSでは、DOM階層で入れ子にすると、extendsされて、ネスト扱いにしてくれるようだ。
要するに、mainCtrlではデータ定義をして、userItemCtrlでは、データ操作をするMVCモデルっぽい構造体を持つことができる。
う〜ん、便利・・・あれ?prototype構造はAngularJSでは考慮されているのか???後ほど考えてみよう・・・

ポイントは以下の3つだが、さほど難しくないので、詳細説明はスル〜する。

・ng-controller
・ng-repeat
・ng-click

form関連

AngularJSはバリデーション関連を強力に指定することができるのが便利。

ソースコード

※submit処理はサーバーサイドプログラムが必要になるため、今回は割愛。

解説

属性

formタグに「novalidate」を追記するのは、HTML5の元々持っているバリデーションを無効化するおまじないと考えよう。

required : 入力必須
ng-minlength : 最低入力文字数
ng-maxlength : 最大入力文字数

※文字数は半角も全角もそれぞれ1文字扱いになるようだ。

バリデーション

バリデーションに引っかかった場合のエラー表示するために「ng-show」を使っているが、値がtrueの場合に表示するという処理で、内部構造を理解しておこう。

必須項目
form名 / 項目名(input) / AngularJSのエラーイベント / 属性(minlengthとmaxlengthにはng-というプレフィックスが付かないので注意)
myForm.name.$error.required

その他の項目種類

Checkbox : true / false 判定により、value値を切り替える事が可能。
Radio : ng-modelを共通にすることでname値と同じ扱いにできる。※これって実際に使う時POSTできないな・・・JSON部分を送信する事になるね。
textarea : {{140 – list.memo.length}}の部分は残り文字数のカウントをしている。

select

なにかと複雑なselectタグもAngularJSではサクッとセットできます。
“ng-options”に配列を与えてあげるだけで項目リストが完成です。
ラベル部分の装飾などはソースを参考にしてもらうといいですが、複雑なリストになる場合は、JS関数と連動させるといいでしょう。
“ng-init”はselected要素ですが、リストに存在しない場合は、自動でblank要素が作られます。

referrence

本家のリファレンスページを参照してより複雑なform処理を簡単にセットしてみましょう。

https://docs.angularjs.org/api/ng/directive/form

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*