Angular JSでハマったこと(画像表示編)

エンジニアの土屋と申します。 現在、ruby on railsとAngular Jsを使って開発しているのです…

エンジニアの土屋と申します。

現在、ruby on railsとAngular Jsを使って開発しているのですが、まだまだ
わからないことが多く、日々四苦八苦しています。
まだわずかな期間ですが、Angular Jsで印象深いハマってしまった実装について
恥ずかしながら短い記事になってしまいますが記してみたいと思います。

・Angular Jsって?
Angular Jsは、Googleとコミュニティによって開発されているオープンソースの
JavaScriptフレームワークでブラウザ上で動作するウェブアプリケーションの開発
にMVCアーキテクチャを取り入れることを目的としています。
MVCなのですが、実際はMVW(Model-View-Whatever)として知られています。

参考URL
https://angularjs.org/
http://github.com/angular/angular.js

・修正内容
縦3、横3で表示している6画像を5画像に減らし、縦を2列で表示したい。
上の列に大画像を2、下の列に普通サイズの画像3画像として、且つ順位を表示して欲しい。

要するに大サイズ2、中サイズ3で表示して欲しいとの事。

ん〜、API側から動的に情報を取得しているので表示枚数については、API側に渡す引数で
制御できるから(limit6からlimit5にする)問題無し。順位はもともとあるparamの
値が多い順にすでに取得しているのでそこも問題無し。あとは表示方法なのですが、
現状ng-repeatで繰り返し表示しているので、表示ブロックは同一なので同じ表示サイズに
なってしまってます。
paramの値が上位2件の場合は大きいサイズの画像にする方法は、いまいちわからない。。
固定表示だったら楽勝なのですけどね〜。。
controller側でeachで取得したjsonを再度組み直すとか、フラグ制御するとか色々やって
みたのですが、いまいちイケてない。もっと効率良くシンプルにできるのではと思い調べてみました。

・解決策
https://docs.angularjs.org/api/ng/directive/ngRepeat

上記を参考にしたのですが、
ふむふむ、どうやら「ng-repeatを指定した要素は、特殊な変数を
使用できる」とエキサイト翻訳君が拙い日本語で教えてくれました。
「繰り返し要素(0..length-1)のオフセットイテレータ」である$indexが使えそうな
気がしてきました。
参考例は、今回はあまり役に立ちそうな感じでなかったので、$indexに+1を足して順位表示と、
ng-ifでうまく表示を切り替えができるのではないか、と思い実際にやってみました。

元のソース

<div class="row-20 cf mb20" ng-controller=“MyCtrl as mc">
 <div ng-repeat=“hoge in mc.data”>
  <div class="col-sm-4">
   <dt><img ng-src=“{{hoge.image}}" alt="" /></a></dt>
  </div>
  </div>
</div>



改修ソース

<div class="row-20 cf mb20" ng-controller=“MyCtrl as mc">            
 <div ng-repeat=“hoge in mc.data”>
    <span ng-if="$index + 1 < 3" >
    <!-- 1位、2位の表示 -->
   <div class="col-sm-6 col-xs-6">
    {$index + 1}}位
    <dt><img ng-src=“{{hoge.image}}" alt="" /></a></dt>
   </div>
  </span>
  <span ng-if="$index + 1 > 2" >
   <!-- 3位以降の表示 -->
   <div class="col-sm-4">
    {{$index + 1}}位
    <dt><img ng-src=“{{hoge.image}}" alt="" /></a></dt>
   </div>
   </span>
  </div>
</div>

としてみたら、

aaaaaaaaaaaa

 

できました!!

Angular Jsは、日本語ドキュメントがまだまだ不足しているので、自分のような日本語オンリーの人間は
エキサイト翻訳君を頼らざるをえないのですが、色々試してみると意外な使用方法を見つけたりできます。