AngularJS文法チートシート

19235 ワード
変数 ディレクティブ JavaScript Angular JavaScript テキストリンク

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
AngularJSチートシート | コレワカ

AngularJSとは

AngularJSはWeb系の全ての機能が完結するJavaScript製のMVWフレームワークのこと
AngularJS公式サイト

基本的な書き方

HTML
<div ng-app="myApp" ng-controller="myCtrl">
  <!-- AngularJS適用範囲 -->
</div>
JavaScript
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {});

変数・型

変数

See the Pen AngularJS_variable by engineerhikaru (@engineerhikaru) on CodePen.

配列変数

See the Pen AngularJS_array_variable by engineerhikaru (@engineerhikaru) on CodePen.

連想配列変数

See the Pen AngularJS_object-variable by engineerhikaru (@engineerhikaru) on CodePen.

ディレクティブ

ng-appディレクティブ

AngularJSアプリケーションのルート要素であることをAngularJSに伝える。

HTML
<div ng-app="myApp">
  <!-- -->
</div>
JavaScript
var app = angular.module("myApp", []);

ng-initディレクティブ

AngularJSアプリケーション開始時に変数を作成・初期化する


See the Pen
AngularJS_ng-init by engineerhikaru (@engineerhikaru)
on CodePen.


ng-controllerディレクティブ

AngularJSアプリケーション変数を処理するコントローラーを追加する

HTML
<div ng-app="myApp" ng-controller="myCtrl">
  <!-- AngularJS適用範囲 -->
</div>
JavaScript
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {});

ng-modelディレクティブ

入力値をスコープ内の変数にバインドする


See the Pen
AngularJS_ng-model by engineerhikaru (@engineerhikaru)
on CodePen.


ng-repeat

配列を展開する


See the Pen
AngularJS_ng-repeat by engineerhikaru (@engineerhikaru)
on CodePen.


ng-if

条件によってDOM内の要素を削除または再作成する


See the Pen
AngularJS_ng-if by engineerhikaru (@engineerhikaru)
on CodePen.


ng-show

条件に基づいて要素を表示・非表示にする (反対はng-hide)


See the Pen
AngularJS_ng-show by engineerhikaru (@engineerhikaru)
on CodePen.


ng-change

入力値が変更された時に、関数を実行する


See the Pen
AngularJS_ng-change by engineerhikaru (@engineerhikaru)
on CodePen.


ng-switch

一致する条件に基づいて要素の制御をする


See the Pen
AngularJS_ng-switch by engineerhikaru (@engineerhikaru)
on CodePen.


ng-click

ボタンがクリックされた時に、関数を実行する


See the Pen
AngularJS_ng-click by engineerhikaru (@engineerhikaru)
on CodePen.


ng-style

要素にスタイルを指定する


See the Pen
AngularJS_ng-style by engineerhikaru (@engineerhikaru)
on CodePen.


ng-class

クラスを動的に設定する


See the Pen
AngularJS_ng-class by engineerhikaru (@engineerhikaru)
on CodePen.


ng-submit

submitボタンがクリックされた時に、関数を実行する


See the Pen
AngularJS_ng-submit by engineerhikaru (@engineerhikaru)
on CodePen.


ng-bind

テキストデータを出力


See the Pen
AngularJS_ng-bind by engineerhikaru (@engineerhikaru)
on CodePen.


ng-cloak

AngularJSが制御を開始するまでコンテンツを表示しない


See the Pen
AngularJS_ng-cloak by engineerhikaru (@engineerhikaru)
on CodePen.


フィルター

uppercase

文字列を全て大文字にする (反対はlowercaseで全て小文字になる)


See the Pen
AngularJS_filter-uppercase by engineerhikaru (@engineerhikaru)
on CodePen.


number

数字をカンマ区切りにする (オプションで小数点以下何桁まで表示するかを設定可能)


See the Pen
AngularJS_filter-number by engineerhikaru (@engineerhikaru)
on CodePen.


currency

数字を通貨形式にフォーマットする


See the Pen
AngularJS_currency by engineerhikaru (@engineerhikaru)
on CodePen.


date

日付を指定した形式にフォーマットする


See the Pen
AngularJS_filter-date by engineerhikaru (@engineerhikaru)
on CodePen.


orderBy

配列を昇順・降順に並べる


See the Pen
AngularJS_orderBy by engineerhikaru (@engineerhikaru)
on CodePen.


limitTo

指定された数までの配列の中身を取り出す


See the Pen
AngularJS_filter-limitTo by engineerhikaru (@engineerhikaru)
on CodePen.


filter

指定された文字に一致する配列の中身を取り出す


See the Pen
AngularJS_filter-filter by engineerhikaru (@engineerhikaru)
on CodePen.


この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
AngularJSチートシート | コレワカ

phpでは配列をjson文字列に回し、jsonに中国語を読ませる
phpテキストファイルの重複行を削除する方法