Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="store" lang="zh_TW">
<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="StoreController as store">
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="product in store.products">
      <h3>{{product.name}}</h3>
        <em class="pull-right">{{product.price | currency}}</em><br>
        <img ng-src="{{product.images[0].thumb}}"/><br/>
        <section ng-init="tab = 1">
          <ul class="nav nav-pills">
            <li ng-class="{ active:tab === 1 }">
              <a href ng-click="tab = 1">Description</a>
            </li>
            <li  ng-class="{ active:tab === 2 }">
              <a href ng-click="tab = 2">Specifications</a>
            </li>
            <li  ng-class="{ active:tab === 3 }">
              <a href ng-click="tab = 3">Reviews</a>
            </li>
          </ul>
          <div class="panel" ng-show="tab === 1">
            <h4>Description</h4>
            <p>{{product.description}}</p>
          </div>
          <div class="panel" ng-show="tab === 2">
            <h4>Specifications</h4>
            <blockquote>None yet</blockquote>
          </div>
          <div class="panel" ng-show="tab === 3">
            <h4>Reviews</h4>
            <blockquote>None yet</blockquote>
          </div>
       </section>
    </li>
  </ul>
  
  
  
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <script src="app.js"></script>
</body>
</html>
 
(function(){
  var app = angular.module('store',[]);
  
  app.controller('StoreController', function(){
    this.products = gem;
  });
  
  
  
  gem = [
    {
      name: '臺鐵八角形排骨便當',
      price: 80,
      description: '內容物:香Q白米飯、帶骨里肌排、炒芥藍菜(或季節蔬菜)、炒高麗菜(或季節蔬菜)、滷豆輪、蜜汁海帶結、海鮮魚板、美味滷蛋、麻油瓜。',
      images:[
        {
          full: "http://www.railway.gov.tw/upload/empmgtproduct/upload/366/%E5%8F%B0%E4%B8%AD%E9%A4%90%E5%BB%B3%E5%85%AB%E8%A7%92%E6%8E%92%E9%AA%A8%E4%BE%BF%E7%95%B62.JPG",
          thumb: "http://ext.pimg.tw/maggie032533/1329286232-3961111188.jpg"
        },
        {
          full: "http://www.railway.gov.tw/upload/empmgtproduct/upload/300/%E9%AB%98%E9%9B%84%E5%85%AB%E8%A7%92%E6%8E%92%E9%AA%A8%E7%B6%B2%E9%A0%81.JPG",
          thumb: "http://lh4.ggpht.com/_dn8GXwGsDrQ/Sd9hC2RVL2I/AAAAAAAACTI/UnJMfmFzNrE/Train_dinner_box02_thumb.jpg"
        }]
    },
    {
      name: '鐵路便當',
      price: 70,
      description: '台灣鐵路公司推出便當，內容物：正宗台灣好米、一顆滷蛋、筍干、排骨、炒空心菜、油豆腐。',
      images:[
        {
          full: "http://emilys77.files.wordpress.com/2011/03/e4bebfe795b6.jpg",
          thumb: "http://i230.photobucket.com/albums/ee320/chingchingwu/rail/LN02_005.jpg"
        }
      ]
    }
  ];
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x