AngularJs+bootstrap(前台购物车)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 thansitional//EN" "http://www.w3.org/th/html4/loose.dtd">
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<%-- <%@include file="/styles/comment/myCss.jsp"%> --%>
<link href="<%=basePath%>styles/bootstrap/css/bootstrap.min.css"
    rel="stylesheet">
<body ng-app="myApp">
    <div ng-controller="myCon">
        <center>
            <h3>购物车</h3>

            <table bgcolor="1" class="table table-hover" border="" cellspacing=""
                cellpadding="">
                <tr>
                    <th>产品编号</th>
                    <th>产品名称</th>
                    <th>产品图</th>
                    <th>购买数量</th>
                    <th>产品单价</th>
                    <th>产品总价</th>
                    <th>操作</th>
                </tr>
                <tr ng-repeat="x in Product">
                    <td>{{x.id}}</td>
                    <td>{{x.name}}</td>
                    <td><img src="{{x.picture}}" width="40px" height="40px;"></td>
                    <td>
                        <button ng-click="reduce($index)">-</button>
                        <input type="text" class="num" ng-model="x.quantity" ng-change="change($index)" />
                        <button ng-click="add($index)">+</button>
                    </td>
                    <td>{{x.price}}</td>
                    <td>{{x.price * x.quantity}}</td>
                    <td><button ng-click="remove($index)">移除</button></td>
                </tr>
            </table>
            <div id="shop">
                <span>总价:</span><span ng-bind="totalQuantity()"></span>
                <span>购买数量</span>
                <span>{{numAll()}}</span>
                <button ng-click="removeAll()">清空购物车</button>
            </div>
    </div>
    </center>
</body>
<%-- <%@include file="/styles/comment/myJs.jsp"%> --%>
<script type="text/javascript"
    src="<%=basePath%>styles/jqueryJs/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
    src="<%=basePath%>styles/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"
    src="<%=basePath%>styles/angular/js/AngujarJs1.2.10.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myCon", function($scope) {
        $scope.Product = [ {
            id : 1000,
            name : "苹果1",
            picture:"<%=basePath%>upload/1001.jpg",
            quantity : 1,
            price : 7777
        }, {
            id : 1001,
            name : "苹果2",
            picture:"<%=basePath%>upload/1001.jpg",
            quantity : 1,
            price : 9884
        }, {
            id : 1002,
            name : "苹果3",
            picture:"<%=basePath%>upload/1001.jpg",
            quantity : 1,
            price : 4562
        }, {
            id : 1003,
            name : "苹果4",
            picture:"<%=basePath%>upload/1001.jpg",
            quantity : 1,
            price : 18224
        } ];
        //减少数量
        $scope.reduce = function(index) {
            if ($scope.Product[index].quantity > 1) {
                $scope.Product[index].quantity--;
            } else {
                $scope.remove(index);
            }
        }
        //添加数量函数
        $scope.add = function(index) {
            $scope.Product[index].quantity++;
        }
        //所有商品总价函数
        $scope.totalQuantity = function() {
            var allprice = 0
            for (var i = 0; i < $scope.Product.length; i++) {
                allprice += $scope.Product[i].quantity
                        * $scope.Product[i].price;
            }
            return allprice;
        }
        //购买总数量函数
        $scope.numAll = function() {
            var numAlls = 0
            for (var i = 0; i < $scope.Product.length; i++) {
                numAlls += $scope.Product[i].quantity;
            }
            return numAlls;
        }
        //删除当前商品
        $scope.remove = function(index) {
            if (confirm("确定要清空数据吗")) {
                $scope.Product.splice(index, 1)
            }
        }
        //清空购物车
        $scope.removeAll = function() {
            if (confirm("你确定套清空购物车所有商品吗?")) {
                $scope.Product = [];
            }
        }
        //解决输入框输入负数时变为1
        $scope.change = function(index) {
            if ($scope.Product[index].quantity >= 0) {
            } else {
                $scope.Product[index].quantity = 0;
            }
        }
        $scope.$watch('Product', function(oldvalue, newvalue) {
            console.log(oldvalue);
            console.log(newvalue);
        })
    })
</script>
</html>

效果图如下:

AngularJs+bootstrap(前台购物车)

分享