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アプリケーションを制御することができる。
ここまでの作業で掲示板アプリは上の画像のようになった。
レスポンスを追加すると総回答数がカウントされ7件を超えると背景全体やカウント数の色が変わるようになった。ユーザーアクションをトリガーにして、ModelだけでなくViewも変化させることができる。
Behavior編は以上です。次はFilterの使い方です。
AngularJS使い方ガイド記事一覧