これはAngularJSを勉強した内容をまとめたものです。
今回したこと
- ディレクティブとは？
- ディレクティブを利用してみる
- 処理の内容を確認
環境
- Ubuntu 14.04 (VirtualBox)
- AngularJS 1.4.7
ディレクティとは？
- DOM要素に付けることができる命令
- {{}}では式の結果を表示するだけなので、forとかifのような制御はディレクティブをつかう
ディレクティブを利用してみる
１. 以下のようなhtmlを用意
<!DOCTYPE html>
<html ng-app="testMod">
<head>
<title>directive</title>
<script src="angular.min.js"></script>
<script src="directive.js"></script>
</head>
<body ng-controller="testController">
<table border="1">
<tr><th>商品名</th><th>値段</th><th>窯元</th><th>在庫</th></tr>
<tr ng-repeat="item in items">
<td> {{ item.name }} </td>
<td> {{ item.price + "円" }} </td>
<td> {{ item.pottery }} </td>
<td>
<span ng-if=item.stock>在庫あり</span>
<span ng-if=!item.stock>在庫なし</span>
</td>
</tr>
</table>
</body>
</html>
２. 以下のようなjsを用意
angular.module('testMod', [])
.controller('testController', function($scope, ItemList){
$scope.items = ItemList();
})
.value('ItemList', function(){
return [
{
name: "たぬきのおきもの",
price: 20000,
pottery: "ほげ窯",
stock: 10
},
{
name: "かえるのおきもの",
price: 10000,
pottery: "ふが製作所",
stock: 0
}
];
});
３. ブラウザでhtmlをみてみる
データをまわして表示と、ifでの表示ができた!
処理内容を確認
- 以下に今回使ったディレクティブを記載
ng-repeat
構文: ng-repeat="変数 in 式"
- 式に渡された配列の値を順番に変数に格納する
- 繰り返し範囲は要素みたいだけど、リファレンスをみると開始終了を指定して、要素の範囲を超えた範囲での繰り返しができるっぽい。
- ひとまず、ここでは基本だけ見る
今回の処理
- itemsにはモデルで用意されている値が入る
- 配列itemsの値を順番にitem変数に入れて、div要素の中で{{}}で表示させている
ng-if
構文： ng-if="式"
- 式の結果がtrueの場合だけ、要素を表示する
今回の処理
- item.stockが0以上であれば"在庫があり"のspan要素を表示、0なら"在庫なし"のspan要素を表示している
- (これくらいなら三項演算子でいいと思うけど、今回は勉強なのでng-ifで処理してみた。)
そのほかメモ
- 他にもng-switchとかたくさん用意されている。
- "ng-"っていうのがAngularJSの標準で用意しているものということみたい。
- HelloWorldを表示したときにおまじないのように書いた"ng-app"もディレクティブで、このページをAngularアプリケーションとして自動起動するという命令らしい。