AngularJs+bootstrap(前台购物车)

最新推荐文章于 2024-03-30 03:34:48 发布

鸿书

最新推荐文章于 2024-03-30 03:34:48 发布

阅读量1.2k

点赞数 2

分类专栏： AngularJs 文章标签： angularjs bootstrap

本文链接：https://blog.csdn.net/qq_39486767/article/details/77109650

版权

AngularJs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ 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>

效果图如下: