AngularJSチートシート TECH
AngularJSとは
AngularJSはWeb系の全ての機能が完結するJavaScript製のMVWフレームワークのこと
AngularJS公式サイト基本文法
AngularJSはAngularJSモジュールを用いて、実装します
<div ng-app="myApp" ng-controller="myCtrl">
<!-- AngularJS適用範囲 -->
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {});
変数・型
変数
変数の代入は$scope.〇〇で、変数の出力は{{}}を使います。
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ hoge }}</p>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.hoge = "Hello World";
});
配列変数
値を配列にして、変数として扱うことができます。
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ hoge[0] }}</p>
<p>{{ hoge[1] }}</p>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.hoge = ["Hello World", "Hello Japan"];
});
連想配列変数
配列の値に、キーと呼ばれる呼び出す時の名前を設定します。
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ hoge.world }}</p>
<p>{{ hoge.japan }}</p>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.hoge = {"world": "Hello World", "japan": "Hello Japan"};
});
ディレクティブ
ng-app
AngularJSアプリケーションのルート要素であることをAngularJSに伝える
<div ng-app="myApp">
<!-- AngularJS適用範囲 -->
</div>
var app = angular.module("myApp", []);
ng-init
AngularJSアプリケーション開始時に変数を作成・初期化する
<div ng-app="myApp" ng-init="hoge = 'Hello World'">
<p>{{ hoge }</p>
</div>
var app = angular.module("myApp", []);
ng-controller
AngularJSアプリケーション変数を処理するコントローラーを追加する
<div ng-app="myApp" ng-controller="myCtrl">
<!-- AngularJS適用範囲 -->
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {});
ng-model
入力値をスコープ内の変数にバインドする
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="hoge">
<p>{{ hoge }}</p>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.hoge = "";
});
ng-repeat
配列を展開する
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="item in items">
<li>{{ item.name }}</li>
</ul>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.items = [
{"number": 1, "name": "アイテム1"},
{"number": 2, "name": "アイテム2"},
];
});
ng-if
条件によってDOM内の要素を削除または再作成する
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="hoge">
<div ng-if="hoge">
<p>Hello World</p>
</div>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.hoge = true;
});
ng-show
条件に基づいて要素を表示・非表示にする (反対はng-hide)
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="hoge">
<div ng-show="hoge">
<p>Hello World</p>
</div>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.hoge = true;
});
ng-change
入力値が変更された時に、関数を実行する
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-change="myFunc()" ng-model="hoge">
<p>{{ result }}</p>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.hoge = "";
$scope.result = "";
$scope.myFunc = function() {
$scope.result = $scope.hoge;
};
});
ng-switch
一致する条件に基づいて要素の制御をする
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="switchItem">
<option value="アイテム1">アイテム1</option>
<option value="アイテム2">アイテム2</option>
</select>
<div ng-switch="switchItem">
<div ng-switch-when="アイテム1"><p>アイテム1を選択中</p></div>
<div ng-switch-when="アイテム2"><p>アイテム2を選択中</p></div>
<div ng-switch-default><p>選択されていません</p></div>
</div>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.switchItem = "アイテム1";
});
ng-click
ボタンがクリックされた時に、関数を実行する
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc()">カウント {{ count }}</button>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
$scope.count += 1;
};
});
ng-style
要素にスタイルを指定する
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-style="myStyle">
<p>Hello World</p>
</div>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myStyle = {
"background": "red",
"color": "white",
"padding": "20px",
};
});
ng-class
クラスを動的に設定する
<div ng-app="myApp" ng-controller="myCtrl">
<input type="radio" ng-model="classValue" value="red" checked>
<input type="radio" ng-model="classValue" value="blue">
<div ng-class="classValue">
<p>Hello World</p>
</div>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.classValue = "red";
});
ng-submit
submitボタンがクリックされた時に、関数を実行する
<div ng-app="myApp" ng-controller="myCtrl">
<form ng-submit="myFunc()">
<input type="text" ng-model="formText">
<input type="submit">
</form>
<p ng-show="result">{{ formText }}の内容で送信されました</p>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.formText = "";
$scope.result = false;
$scope.myFunc = function (){
$scope.result = true;
};
});
ng-bind
要素にスタイルを指定する
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="hoge"></p>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.hoge = "Hello World";
});
ng-cloak
HTMLデータを出力
<div ng-app="myApp">
<p ng-cloak>{{ "Hello World" }}</p>
</div>
var app = angular.module("myApp", []);
フィルター
uppercase
文字を大文字・小文字にする
<div ng-app="myApp">
<p>{{ hoge | uppercase }}</p>
<p>{{ hoge | lowercase }}</p>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.hoge = "Hello World";
});
number
数字をカンマ区切りにする (オプションで小数点以下何桁まで表示するかを設定可能)
<div ng-app="myApp">
<p>{{ hoge | number }}</p>
<p>{{ hoge | number : 3 }}</p>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.hoge = 123456789;
});
currency
数字を通貨形式にフォーマットする
<div ng-app="myApp">
<p>{{ price | currency }}</p>
<p>{{ price | currency : "¥" }}</p>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.price = 123456;
});
date
日付を指定した形式にフォーマットする
<div ng-app="myApp">
<p>{{ today | date }}</p>
<p>{{ today | date : "yyyy-MM-dd" }}</p>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.today = new Date();
});
orderBy
配列を昇順・降順に並べる
<div ng-app="myApp">
<ul ng-repeat="item in items | orderBy: 'point' ">
<p>{{ item.name }}: {{ item.point }}</p>
</ul>
<ul ng-repeat="item in items | orderBy: '-point' ">
<p>{{ item.name }}: {{ item.point }}</p>
</ul>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.items = [
{"name": "アイテム1", "point": 200},
{"name": "アイテム2", "point": 300},
{"name": "アイテム3", "point": 100},
];
});
limitTo
指定された数までの配列の中身を取り出す
<div ng-app="myApp">
<ul ng-repeat="item in items | limitTo: 3 ">
<p>{{ item.name }}: {{ item.point }}</p>
</ul>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.items = [
{"name": "アイテム1", "point": 200},
{"name": "アイテム2", "point": 300},
{"name": "アイテム3", "point": 100},
{"name": "アイテム4", "point": 400},
{"name": "アイテム5", "point": 500},
];
});
filter
指定された文字に一致する配列の中身を取り出す
<div ng-app="myApp">
<input type="text" ng-model="query" placeholder="全てのデータに一致">
<ul ng-repeat="item in items | filter:query">
<p>{{ item.name }}: {{ item.price }}円</p>
</ul>
<input type="text" ng-model="query2.name" placeholder="一部のデータに一致">
<ul ng-repeat="item in items | filter:query2">
<p>{{ item.name }}: {{ item.price }}円</p>
</ul>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.items = [
{"name": "ラーメン", "price": 900},
{"name": "チャーハン", "price": 700},
{"name": "餃子", "price": 300},
];
});