AngularJSのDirectiveについて（2）

AngularJSのよく使うdirectiveの紹介です。
今回は「ng-if」、「ng-class」、「ng-repeat」、「ng-click」、「ng-cloak」を紹介していますが、他にも便利なdirectiveがありますので公式ページのDeveroperのAPIリファレンスで確認すると良いでしょう。

ng-ifの使い方

「ng-if」はその値が「true」か「false」かで評価して「true」だったら「ng-if」属性の付いたDOMを表示し、「false」なら非表示にしてくれます。

ng-ifデモ
HTMLコード

<div ng-controller="mainController">          
　　　　<div>
  　　　　<label>ユーザー名を入力してください：</label>
    <input type="text" ng-model="name" />
  </div>
  <div ng-if="name.length !== characters">ユーザー名は5文字にしてください</div>
  <hr>
  <p>ユーザー名は…{{name}}</p>
  </div>      
</div>

AngularJSコード

var myApp = angular.module('myApp', []);
myApp.controller('mainController', ['$scope', function ($scope) {
    $scope.name = '';   
    $scope.characters = 5;
}]);

「ng-if」と似たようなdirectiveに「ng-show」と「ng-hide」があります。これはDOMは存在するが隠したり表示したりするものです。
一方「ng-if」はDOM自体を隠したり表示したりするものです。

ng-classの使い方

「ng-class」はclassをつけたり外したりします。
「ng-if」と合わせて使う場合もあります。

「ng-class」デモ

<div ng-class="{'alert-warning':name.length < 5,'alert-danger':name.length > 5}"
>ユーザー名は5文字にしてください</div>

AngularJSコード

var myApp = angular.module('myApp', []);
myApp.controller('mainController', ['$scope', function ($scope) {
    $scope.name = '';   
    $scope.characters = 5;
}]);

ng-repeatの使い方

「ng-repeat」は同じことを繰り返したいときに使います。比較的よく使われるdirectiveです。
HTML側の繰り返したい要素、例えばliに「ng-repeat=”rule in rules”」と記述します。
値の「rules」はAngularJS側で$scopeに付けたプロパティ名です。「rule」の方は好きな名前で構いませんが、「{{rule.myText}}」のインターポレーションの中でこの名前を使います。好きなところでプロパティを追加できるのは、やりたい放題なJavaScriptの特徴ですね。

ng-repeatデモ
HTMLコード

<ul>
　　　　<li ng-repeat="rule in rules">{{rule.myText}}</li>
</ul>

AngularJS側は$scopeに「rules」というプロパティを作って配列の値を代入しています。
この配列の要素はオブジェクトになっており、キーは好きな名前を付けます。このキーはHTML側のインターポレートで使用します。そしてオブジェクトの値がループさせたliの中身になる要素です。

AngularJSコード

var myApp = angular.module('myApp', []);

myApp.controller('mainController',['$scope',function($scope) {
	$scope.rules = [
		{myText:'AAAAAAAAAAA'},
		{myText:'BBBBBBBBBBB'},
		{myText:'CCCCCCCCCCC'}
	];
}]);

ng-clickの使い方

「ng-click」はクリックしたら関数を実行するDirectiveです。イベントリスナーもdirectiveを使って設定できます。
HTML側に「ng-click」属性を置き、値に関数を置きます。
AngularJS側で関数の定義を記述します。

ng-clickデモ
HTMLコード

<div ng-controller="mainController">
            <button ng-click="alertClick()">click</button>
</div>

AngularJSコード

var myApp = angular.module('myApp', []);
myApp.controller('mainController',['$scope',function($scope) {
    $scope.alertClick = function(){
	alert('クリックした');
}
}]);

イベント関連のdirectiveは次のようなものがあります。

ng-cloakについて

AngularJS読み込みの関係で、「{{ }}」が一瞬表示されてしまうのを防ぐのが「ng-cloak」です。

directiveは多くのものが用意されています。
各directiveの詳細は公式ページのDeveroperのAPIリファレンスで確認することができます。