□技術メモ - angularJSについて ※管理人の個人的な技術メモです。このページの内容を実行した結果について 管理人はいかなる責任も負いかねますのでご自身の責任でお試しください。 ----------------------------------------------------------- ○angularJSについて ・JavaScriptのMVCフレームワークである。 ・事前知識として、JavaScript, CSS が分かっていた方がよい。 ・公式サイトは、https://angularjs.org/ 以下のページは良くみると思う。 LEARN-Tutorial DEVELOP-APIReference DEVELOP-Developer Guide DEVELOP-Download -------- 〇使用宣言 ・以下、使用時のサンプル ・以下のライブラリの読み込みが必要になるので、

こんにちは、{{kanjiName}}さん!

5キログラムは{{5 * 1000}}グラムです。!

---- -------- 〇ng-model による model の登録および参照 ・上記のコードについて補足、説明。 ・inputフィールドにおいて、ng-model="kanjiName"等とすれば、 フィールドの値がmodelに登録されて、 {{kanjiName}}とすることで、この値を参照することができる。 ・式の評価や、JavaScriptのコードの評価も {{ }} で可能。 例えば、{{2 * 3}} で 6 が表示される。 -------- 〇コントローラを使う ・コントローラを定義して、プロシージャを外部ファイルに定義できる。 要点は以下の通り。 ・コントローラの使用宣言。以下のように記述する。 ・コントローラの使用範囲をdivで宣言する。 いわゆるスコープのようなものを定義する。 以下は定義の例。

・タグについて確認 ul(unorderd list)は、順序のないリストを表示する際に使う。 li(list)は、各項目についての表示を行う。 ・コントローラの定義ファイルの例 test.js は下記を参照。 ・大体以下のように定義されている。 var モジュール名 = function($scope) { $scope.構造体名 = [ {"メンバ名1":値, "メンバ名2":値, "メンバ名3":値 ... } {"メンバ名1":値, "メンバ名2":値, "メンバ名3":値 ... } {"メンバ名1":値, "メンバ名2":値, "メンバ名3":値 ... } ... ]; } index2.html ----

ユーザ数は{{users.length}}人です。

本日は{{today|date:'yyyy-MM-dd'}}日です。

---- test.js ---- var testCtrl = function($scope) { $scope.users = [ {"name":"abe","score":10.5}, {"name":"itoh","score":20.5}, {"name":"utsunomiya","score":40.1}, ]; $scope.today = new Data(); ]; } ---- -------- 〇フィルタを使う ・|uppercase で表示が大文字になる。 ・|number.数字 で小数点以下の表示桁数を設定できる。 ・|number を設定した時点で数値は３ケタ単位でのカンマ区切りになる。 ・|currency で $ マークが表示される。 |currency."\" で \ マークが表示される。 ・|date:'yyyy-MM-dd' で、日付フォーマットが'yyyy-MM-dd'形式になる。 例： {{user.name|uppercase}}{{user.score|number.2}} -------- 〇ng-repeat におけるフィルタ ・以下で繰り返しの上限を設定できる。下の例は上限５回。
  • ・並べ替えの場合は以下の通り。並べ替えするプロパティを指定する。
  • ・前方一致するものを表示する場合は以下の通り
  • -------- 〇ng-repeat における命令 ・要素の番号を取得する index+1 を記述することで、1から始まるindexが表示される。 {{user.index+1}}{{user.name}}{{user.score}} ・{{first}}, {{last}}, {{middle}}を取得することもできる。 いずれも 真偽値を返す。{{middle}}は、firstとlastの間ならTrueを返す。 -------- 〇偶数、奇数判定 ・偶数、奇数判定 １行置きに背景色を変える場合などに使用することが考えられる。
  • --------