Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
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>
Output

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

Dismiss x
public
Bin info
SoarLinpro
0viewers