首页 > 代码库 > angularJS: shop chart

angularJS: shop chart

2024-08-29 09:32:53   224人阅读

<!DOCTYPE html>
<html ng-app="app">
 
<head>
    <meta charset="utf-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    body {
        font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    }
    </style>
</head>
 
<body>
    <div class="container" ng-controller="firstController">
        <table class="table">
            <thead>
                <tr>
                    <th>产品编号</th>
                    <th>产品名称</th>
                    <th>购买数量</th>
                    <th>产品单价</th>
                    <th>产品总价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in Product">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <button type="button" class="btn" ng-click="reduce($index)">-</button>
                        <input type="text" name="" value="" placeholder="" ng-model="item.quantity">
                        <button type="button" class="btn" ng-click="add($index)">+</button>
                    </td>
                    <td>{{item.price}}</td>
                    <td>{{item.quantity*item.price}}</td>
                    <td>
                        <button type="button" class="btn btn-danger" ng-click="remove($index)">移除</button>
                    </td>
                </tr>
                <tr>
                    <td>总价格：{{totalPrice()}} 元</td>
                    <td colspan="4">总购买数：{{totalQuantity()}}</td>
                    <td>
                        <button type="button" class="btn btn-danger" ng-click="removeall()">清空购物车</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script>
    <script type="text/javascript">
    angular.module(‘app‘, []).controller(‘firstController‘,
        function($scope) {
            $scope.Product = [{
                id: 1000,
                name: "iPhone 6 Plus",
                quantity: 1,
                price: 6888
            }, {
                id: 1001,
                name: "iPhone 6",
                quantity: 1,
                price: 5288
 
            }, {
                id: 1002,
                name: "iPhone 5s",
                quantity: 1,
                price: 4188
            }, {
                id: 1003,
                name: "iPhone 5c",
                quantity: 1,
                price: 3288
            }];
 
            $scope.totalPrice = function() {
                var total = 0;
                angular.forEach($scope.Product, function(item) {
                    total += item.quantity * item.price;
                });
                return total;
            }
 
            $scope.totalQuantity = function() {
                var total = 0;
                angular.forEach($scope.Product, function(item) {
                    total += parseInt(item.quantity);
                });
                return total;
            }
 
            $scope.remove = function(index) {
                $scope.Product.splice(index, 1);
            }
 
            $scope.removeall = function() {
                var index;
                for (index = $scope.Product.length - 1; index >= 0; index--) {
                    $scope.remove(index);
                }
            }
 
            $scope.reduce = function(index) {
                if ($scope.Product[index].quantity != 1) {
                    $scope.Product[index].quantity--;
                } else {
                    var ans = confirm("是否移除该产品？");
                    if (ans) {
                        $scope.remove(index);
                    } else {
                        $scope.Product[index].quantity = 1;
                    }
                }
            }
 
            $scope.add = function(index) {
                $scope.Product[index].quantity++;
            }
 
            $scope.$watch(‘Product‘, function(newValue, oldValue) {
                angular.forEach(newValue, function(item, key) {
                    if (item.quantity < 1) {
                        var ans = confirm("是否移除该产品？");
                        if (ans) {
                            $scope.remove(key);
                        } else {
                            item.quantity = oldValue[key].quantity;
                        }
                        return;
                    }
                });
            }, true);
 
        });
    </script>
</body>
 
</html>

angularJS: shop chart


联系
我们