Blog スタッフブログ

AngularJSで簡単フロントエンド開発 Capter.2

Category | Blog
/ 6,005views

こんにちは、制作担当の奥田です。
前回のAngularJSで簡単フロントエンド開発 Capter.1の続きをやっていきましょう。

angularjs-logo

 

Table of contents

  1. 前回のおさらい
  2. ng-repeatでループ表示
  3. Clickイベントで変更させる
  4. ng-classでactiveクラスを付与する
  5. 最後に

前回のおさらい

前回はJSONデータをビューに渡し、表示するところまでをご説明しました。

DEMO.JSONデータの表示

ビューとのデータのやり取りを$scopeでおこなっている事がわかっていただけたかと思います。
次はng-repeatを使用して、配列データをループで表示してみたいと思います。

ng-repeatでループ表示

ループで表示するのはカラーの選択とフォントの選択の部分です。
ここでもう一度JSONデータを確認します。

DEMO.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>

DEMO.ループ表示

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 );
}

DEMO.Clickイベントで変更させる

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;
}

DEMO.ng-class

これで思うような結果になったのではないでしょうか?

最後に

最後にブラウザサポートですが、IE8以前には対応していないのでちょっとした対策が必要です。
その方法は以下の記事などを参考にしてみてください。

AngularJS を古い IE に対応させるには

Reactブームの真っ只中ですが、AngularJSの開発速度はとても魅力的だと思います。
ぜひお試しください。

Category | Blog
Author | Mineo Okuda / 6,005views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)