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="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <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="MainController">
  <div class="wrapper">
    <table class="table">
      <tbody>
        <tr>
          <td>Name: </td>
          <td><input type="text" ng-model="PName"></td>
        </tr>
        <tr>
          <td>Price: </td>
          <td><input type="number" ng-model="Price"></td>
        </tr>
        <tr>
          <td>Count: </td>
          <td><input type="number" ng-model="Count"></td>
        </tr>
        <tr>
          <td colspan="2">
            <button ng-click="buy(PName, Price, Count)" class="btn btn-primary">Buy</button>
          </td>
        </tr>
      </tbody>
    </table>
    
    <div class="checkbox">
      <label for="debug">
        <input type="checkbox" id="debug" ng-model="EnableDebug">
        Enable Debug
      </label>
    </div>
    
    <div class="result">
      <p>"{{PName}}" ({{Count|number}}) with price ${{Price|number}} at total {{subtotal(Price, Count)|number}}</p>
    </div>
    
    <table class="table">
      <thead>
        <tr>
          <th>No#</th>
          <th>Name</th>
          <th>Count</th>
          <th>Price</th>
          <th>Total</th>
          <th>Del</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in cart | orderBy:Order">
          <td>{{$index + 1}}</td>
          <td>{{item.PName}}</td>
          <td>
            <a ng-click="modify($index, -1)">-</a>
            {{item.Count}}
            <a ng-click="modify($index, +1)">+</a>
          </td>
          <td>{{item.Price}}</td>
          <td>{{subtotal(item.Price, item.Count)}}</td>
          <td><button ng-click="del($index)" class="btn btn-danger">Del</button></td>
        </tr>
        <tr>
          <td>#</td>
          <td></td>
          <td></td>
          <td></td>
          <td>{{Total}}</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  
    <pre ng-show="EnableDebug">{{cart|json}}</pre>
  </div>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers