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>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<meta name="description" content="實作購物車清單加總金額功能" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="MainCtrl">
 
  商品名稱 : <input type="text" ng-model="PName"><br>
  商品價格 : <input type="number" ng-model="Price"><br>
  購買數量 : <input type="number" ng-model="Qty"><br>
  
  您購買了: <span style="color: red">{{PName||'N/A'}}</span> 數量: {{Qty||0 |number:0}} 單價: ${{Price||0 |number:0}}，小計: {{Subtotal(Qty, Price)||0 |currency: 'NT$'}} 元
  
  <br>
  <button ng-click="addToCarts()">加入購物車</button>
  <br>
  <label><input type="checkbox" ng-model="IsDebug">啟用偵錯</label>
  <pre ng-show="IsDebug">{{carts | json}}</pre>
  
  <table class="table">
    <tr>
      <th>功能</th>
      <th>#</th>
      <th>商品名稱</th>
      <th>商品價格</th>
      <th>購買數量</th>
      <th>小計</th>
    </tr>
    <tr ng-repeat="item in carts">
      <td><button ng-click="del($index)">刪除</button></td>
      <td>{{$index+1}}</td>
      <td>{{item.PName}}</td>
      <td>{{item.Price}}</td>
      <td>{{item.Qty}}</td>
      <td>{{Subtotal(item.Qty, item.Price)}}</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>加總</td>
      <td>{{total()}}</td>
    </tr>
  </table>
</body>
</html>
Output

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

Dismiss x
public
Bin info
l7960261pro
0viewers