2015年5月8日金曜日

AngularJSで、テンプレート再び(More Templating)

AngularJSで、テンプレート再び(More Templating)です。Json形式のデータをテンプレートに割り当てて表示しています。

読み込むJson形式のデータ
{
  "id": "motorola-defy-with-motoblur", 
  "images": [
    "img/phones/motorola-defy-with-motoblur.0.jpg", 
    "img/phones/motorola-defy-with-motoblur.1.jpg", 
    "img/phones/motorola-defy-with-motoblur.2.jpg"
  ], 
  "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122"
}
テンプレート
<img ng-src="{{phone.images[0]}}" class="phone">
<h1>{{phone.name}}</h1>
<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}">
  </li>
</ul>
実際に設定してみたサイトがこちら


0 件のコメント:

コメントを投稿