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}}{{IsAllselected}}</pre>
  
  <table class="table">
    <caption>
      搜尋 <input type="text" ng-model="keyword">
    </caption>
    <tr>
      <th><input type="checkbox" ng-model="IsAllselected" ng-change="allselected()"></th>
      <th>功能</th>
      <th>#</th>
      <th>
        <a href="" ng-click="orderByColumn='PName'">↑</a>
        商品名稱
        <a href="" ng-click="orderByColumn='-PName'">↓</a>
      </th>
      <th>
        <a href="" ng-click="orderByColumn='Price'">↑</a>
        商品價格
        <a href="" ng-click="orderByColumn='-Price'">↓</a>
      </th>
      <th>
        <a href="" ng-click="orderByColumn='Qty'">↑</a>
        購買數量
        <a href="" ng-click="orderByColumn='-Qty'">↓</a>
      </th>
      <th>小計</th>
    </tr>
    <tr ng-repeat="item in carts | filter: keyword | orderBy:orderByColumn"
        ng-mouseover="item.highlight=true"
        ng-mouseleave="item.highlight=false"
        ng-class="{'highlight': item.highlight}"
        >
      <td><input type="checkbox" ng-model="item.IsDeleted"></td>
      <td>
        <button ng-click="del($index)">刪除</button>
        <button ng-show="!item.IsEdited" ng-click="edit(item)">編輯</button>
        <button ng-show="item.IsEdited" ng-click="complete(item)">完成</button>
      </td>
      <td>{{$index+1}}</td>
      <td>{{item.PName}}</td>
      <td>{{item.Price}}</td>
      <td>
        <span ng-hide="item.IsEdited">{{item.Qty}}</span>
        <input type="number" class="input-small"
               ng-model="item.Qty2"
               ng-show="item.IsEdited">
      </td>
      <td>{{Subtotal(item.Qty, item.Price) | currency:'NT$'}}</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>加總</td>
      <td>{{total() | currency:'NT$'}}</td>
    </tr>
  </table>
  <button ng-click="batchDelete()">批次刪除</button>
</body>
</html>
Output

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

Dismiss x
public
Bin info
l7960261pro
0viewers