こんにちは、制作担当の奥田です。
前回のAngularJSで簡単フロントエンド開発 Capter.1の続きをやっていきましょう。
Table of contents
前回のおさらい
前回はJSONデータをビューに渡し、表示するところまでをご説明しました。
ビューとのデータのやり取りを$scopeでおこなっている事がわかっていただけたかと思います。
次はng-repeatを使用して、配列データをループで表示してみたいと思います。
ng-repeatでループ表示
ループで表示するのはカラーの選択とフォントの選択の部分です。
ここでもう一度JSONデータを確認します。
item.colorsとitem.fontsの配列をそれぞれループすればうまくいきそうです。
ループしたい要素にng-repeat属性を記述し、「color in item.colors」と書きます。
これはitem.colorsの配列をcolorに入れてループで回すという意味です。
なのでcolor.nameで色の名前が、color.slagでurlが取得できるということになります。
<div class="col-xs-6 col-sm-3" ng-repeat="color in item.colors">
あとは表示したい箇所に{{}}で出力するだけです。
selected.font.slagは選択中の変数selectedの値を出力しています。
<img ng-src="img/{{color.slag}}/{{selected.font.slag}}.png" alt="">
<span>{{color.name}}</span>
Clickイベントで変更させる
今度はビュー側からクリックイベントを取得し、選択中のアイテムの変更をする処理を書いていきます。
Clickイベントはng-click属性で発火します。
ng-repeatの現在のキーは$indexで取得できます。
なので、_changeColorメソッドに$indexを渡し、カラーを変更する処理を書きます。
<div class="col-xs-6 col-sm-3" ng-repeat="color in item.colors" ng-click="_changeColor($index)">
ロジックの部分は特に難しいことはなく、$scopeにメソッドを定義します。
引数のキーを取得して選択中アイテムを変更するだけです。
/**
* 色の変更
*/
$scope._changeColor = function(i){
selectItem( i , $scope.keys.font );
}
ng-classでactiveクラスを付与する
選択中のアイテムを視覚的にわかりやすくする為に、現在選択中のアイテムの要素にactiveクラスを付与します。
それはng-classという属性にbooleanを返すことで実現できます。
注意すべき点はオブジェクトを代入する点です。
第一引数に付与したいクラス名、第二引数にbooleanを返すメソッドを指定します。
<div class="item-colors text-center" ng-class="{active: isActive('color',$index)}">
/**
* activeクラスの付与
*/
$scope.isActive = function(type,i){
if($scope.keys[type] === i){
return true;
}
return false;
}
これで思うような結果になったのではないでしょうか？
最後に
最後にブラウザサポートですが、IE8以前には対応していないのでちょっとした対策が必要です。
その方法は以下の記事などを参考にしてみてください。
Reactブームの真っ只中ですが、AngularJSの開発速度はとても魅力的だと思います。
ぜひお試しください。