Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
    <html lang="en" ng-app="shopCart">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>shop cart</title>
        <link rel="stylesheet" href="http://apps.bdimg.com/libs/todc-bootstrap/3.1.1-3.2.1/todc-bootstrap.min.css">
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/lodash/3.5.0/lodash.js"></script>
        <script src="src/scripts/shopcart.controller.js"></script>
    </head>
    <body ng-controller="shopCartCtrl">
        <div class="container">
            <div class="row">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th class="col-md-2">#</th>
                    <th class="col-md-2">商品</th>
                    <th class="col-md-2">单价</th>
                    <th class="col-md-2">数量</th>
                    <th class="col-md-2">增加</th>
                    <th class="col-md-2">减少</th>
                    <th class="col-md-2">小计</th>
                </tr>
            </thead>
            <tbody>
                <tr  ng-repeat="data in datas">
                    <th scope="row">{{data.id}}</th>
                    <td>{{data.name}}</td>
                    <td>{{data.price}}</td>
                    <td>{{data.count}}</td>
                    <td ng-click="addNum($index)">{{data.add}}</td>
                    <td ng-click="reduceNum($index)">{{data.reduce}}</td>
                    <td>{{data.count*data.price | currency}}</td>
            <th class="col-md-2" ng-click="delProduct($index,$event)">删除</th>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>totlal Num: {{TotalNum }}</td>
                    <td>total Price: {{TotalPrice | number:2}}</td>
                </tr>
            </tfoot>
        </table>
        </div>
        </div>
    </body>
    </html>
 
var myApp = angular.module('shopCart', []);
myApp.controller('shopCartCtrl', ['$scope', function($scope) {
  //购物车信息
  $scope.datas = [{ id: '1', name: '蜂蜜', price: 50, count: 1, add: '+', reduce: '-'}, 
                  { id: '2', name: '黄豆酱', price: 77.5, count: 1, add: '+', reduce: '-'}, 
                  { id: '3', name: '牛奶', price: 60, count: 1, add: '+', reduce: '-'}];
  var len = $scope.datas.length;
  $scope.TotalNum = 0;
  $scope.TotalPrice = 0;
  getTotal();
  getNum();
  //点击'+'增加数量
  $scope.addNum = function($index) {
    for (i = 0; i < len; i++) {
      if (i == $index) {
        $scope.datas[i].count++;
        break;
      }
    }
    getTotal();
  };
  //点击"-"减少数量
  $scope.reduceNum = function($index) {
    for (i = 0; i < len; i++) {
      if (i == $index && $scope.datas[i].count != 0) {
        $scope.datas[i].count--;
        break;
      }
    }
    getTotal();
  };
  //删除商品
  $scope.delProduct = function(index, event) {
    if($scope.datas[index]) {
      $scope.datas.splice(index, 1);
    }
  };
    //商品总数量
  function getNum() {
    $scope.TotalNum = 0;
    for (i = 0; i < len; i++) {
      $scope.TotalNum = $scope.TotalNum + $scope.datas[i].count;
    }
    return $scope.TotalNum;
  };
    //商品的总价
  function getTotal() {
    $scope.TotalPrice = 0;
    for (i = 0; i < len; i++) {
      $scope.TotalPrice += $scope.datas[i].price * $scope.datas[i].count;
    }
    return $scope.TotalPrice;
  };
}]);
Output

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

Dismiss x
public
Bin info
stiekelpro
0viewers