AngularJS使い方ガイド Behavior編

Two-Way Data Bindingと合わせてBehaviorを設定し見た目を調整する

Behaviorは$scopeに定義しディレクティブから利用

Two-Way Data Binding編では、ユーザーアクションから発生するイベントでModelを操作して,

ng-model経由でデータがバインディングされる状態を確認した。

本記事(Behavior編)では、Two-Way Data Bindingの使い方で作業した

  • レスポンスの受付
  • データの反映
  • 数の更新

にプラスして、データの状態に応じて見た目を制御する方法について書いてみる。データの状態によって、Viewを制御するためには、AngularJSのBehaviorという概念を利用して調整できる。

Behaviorを定義する前に、Two-Way Data Binding編でレスポンス数をリアルタイムで更新可能にしたように、掲示板スレッドの総回答数を随時更新可能な状態にする。

現状の回答総数は、

<span class="radius label">{{thread.answers.length}}</span>

上の方法で取得しているが、この状態だと回答に付いたレスポンス数が反映されない。そのため、以下のように修正する。

<span class="radius label" ng-class="manyAnswer()">{{treeCount()}}</span>

treeCount()というスレッドの回答総数を取得するコードをControllerに新設する。また、manyAnswer()というBehaviorもControllerに定義する。

$scope.treeCount = function () {
	var count = 0;
	angular.forEach($scope.thread.answers, function (e) {
		if (e.body) { count++ }

		if (e.tree) {
			angular.forEach(e.tree, function (f) {
				if (f.response) { count++ }
			});
		}
        });
        return count;
}

tree(レスポンス)が存在する場合は、レスポンス数も数えてカウントアップするコードになる。また、Behaviorを以下のように記述する。

$scope.manyAnswer = function () {
	return $scope.treeCount() > 7 ? "alert" : "";
}

総回答数が7件以上の場合には、alertというFoundationのclass属性を返すbehaviorがmanyAnswerになる。このbehaviorをng-classディレクティブに設定することで、Modelの状態(総回答数)に応じてViewのスタイルを制御することが可能。

総回答数が7件以上の場合には背景の色も変えてみたい。その場合には、

<div class="panel" ng-class="manyAnswerCallout()">

上のようにbehaviorをng-classに設定し、

$scope.manyAnswerCallout = function () {
	return $scope.treeCount() > 7 ? "callout" : "";
}

とすれば、calloutの値をclass属性にダイナミックに追加することができる。

Behaviorを利用することで、

ユーザーアクション → データバインディング → Viewの制御

という流れでAngularJSアプリケーションを制御することができる。

angularjs-behavior

ここまでの作業で掲示板アプリは上の画像のようになった。

レスポンスを追加すると総回答数がカウントされ7件を超えると背景全体やカウント数の色が変わるようになった。ユーザーアクションをトリガーにして、ModelだけでなくViewも変化させることができる。

Behavior編は以上です。次はFilterの使い方です。

AngularJS使い方ガイド記事一覧

Webエンジニアブログにコメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

AngularJS使い方ガイド Behavior編の記事にコメントを投稿