用angular JS和 bootstrap完成一个简单的购物车界面

最新推荐文章于 2023-04-21 18:09:12 发布

NCHUtianlin

最新推荐文章于 2023-04-21 18:09:12 发布

阅读量617

点赞数

分类专栏：前端开发文章标签： angular JS bootstrap 购物车

本文链接：https://blog.csdn.net/nchutianlin/article/details/103534541

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

初学angularJS，自己做一个简单的demo玩一下。

购物车界面：(1)能显示商品基本信息； (2)能对购买数量进行修改；

(3)能够删除不想购买的商品； (4)能够自动计算购买数量和总金额

1. pay.html 购物车界面代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>我的购物车</title>
<link href="bootstrap/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="angularJS/angular.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<style type="text/css">
	table input{ text-align:center; width:30%; }
	.div_emptyFont{ font-size:40px; color:#999; margin-top:100px; }
</style>
<body>
	<div  ng-app="myApp" ng-controller="myController" class="container">
	<table class="table" ng-show="cart.length">
    	<thead>
        	<tr><th>编号</th><th>商品名称</th><th>购买数量</th>
            	<th>单价</th><th>总价</th><th>操作</th>
            </tr>
        </thead>
        <tbody>
        	<tr ng-repeat="item in cart">
            	<td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>
                	<button type="button" class="btn btn-primary" ng-click="reduceQuantity(item)">-</button>
                	<input type="text" value="" ng-model="item.quantity" />
                    <button type="button" class="btn btn-primary" ng-click="addQuantity(item)">+</button>
                </td>
                <td>{{item.price}}</td>
                <td>{{item.quantity*item.price}}</td>
                <td><button type="button" class=" btn btn-danger" ng-click="remove(item.id)" >移除</button></td>
            </tr>
            
            <tr>
            	<td>购物总价</td>
                <td>{{totalPrice()}}</td>
                <td>购买总数量</td>
                <td>{{totalQuantity()}}</td>
                <td colspan="2">
                	<button type="button" class="btn btn-danger" ng-click="cart={}">全部清空</button>
                </td>
            </tr>
        </tbody>
    </table>
    
    <div ng-show="!cart.length" class="div_emptyFont" >
    	此处空空如也。。。。。。
    </div>
	</div>
</body>
</html>

2. index.js 数据获取和事件处理

var app = angular.module("myApp",[]);
app.controller("myController",function($scope){
		$scope.cart=[
			{   id:1001,
				name:'ipone4s',
				quantity:2,
				price:3000
			},
			{   id:1023,
				name:'小米note',
				quantity:5,
				price:3999
			},
			{   id:561,
				name:'特步跑鞋',
				quantity:2,
				price:700
			},
			{   id:66,
				name:'李宁羽毛球拍',
				quantity:2,
				price:562
			},
			{   id:4321,
				name:'ipone7s',
				quantity:2,
				price:5000
			},
			
		];
		
		/**购物总价**/
		$scope.totalPrice=function()
		{
			var total=0;
			angular.forEach($scope.cart,function(item){
					total+=item.quantity*item.price;
				});	
			return total;
		};
		/**计算购买总数量**/
		$scope.totalQuantity=function()
		{
			var total=0;
			angular.forEach($scope.cart,function(item){
					total+=parseInt(item.quantity);
				});	
			return total;
		};
		
		/**找一个元素的索引**/
		var findIndex=function(id)
		{
			var index=-1;
			angular.forEach($scope.cart,function(item,key){
					if(item.id === id)
					{
						index=key;
					}
				
				});
				return index;
		}
		
		/**移除商品**/
		$scope.remove=function(id){
			//alert(id);
			//**找出该id对应的索引
			var index=findIndex(id);
			alert(index);
			if(index !== -1)
			{
				$scope.cart.splice(index,1);
			}
		}
		
		/**全部清空购物车**/
		//即， 使cart变为空
		
		/**添加购买数量**/
		$scope.addQuantity=function(item){
				++item.quantity;
		}
		
		/**减少购买数量**/
		$scope.reduceQuantity=function(item){
			
			if( item.quantity > 1)
			{
				--item.quantity;
			}
			else{
				var returnKey=confirm('是否要移除该商品！！！');
				if(returnKey)
				{
					$scope.remove(item.id);
				}
			}
		}
		
		$scope.$watch('cart',function(newValue,oldValue)
		{
			angular.forEach(newValue,function(item,key){
					if(item.quantity < 1)
					{
						var returnKey=confirm('是否从购物车中移除？？');
						if(returnKey)
							$scope.remove(item.id);
						else
							item.quantity=oldValue[key].quantity;
					}
					
				});
		});
			
});

3. 界面效果

这个较为简单，只是引用了angular JS做数据渲染以及事件操作，相比自己纯手写JS来处理要轻松得多。bootstrap用来处理界面布局和样式选择上。这个demo扔有很多改进的地方，我在这里主要就是记录一下我今天用angular JS如何渲染数据以及遇上的一点小问题。

（1）.我将 ng-app写在body元素里面了：<body ng-app>，这个单独用没问题，但是我放入我的web项目中，浏览器访问tomcat，打开该页面时浏览器出现警告

这就导致了数据无法渲染到界面，其实就是angular的控制器没有起作用。所以当我将 ng-app放在DIV元素里的时候，就正常显示了。

NCHUtianlin

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用angular JS和 bootstrap完成一个简单的购物车界面

初学angularJS，自己做一个简单的demo玩一下。购物车界面：(1)能显示商品基本信息； (2)能对购买数量进行修改； (3)能够删除不想购买的商品； (4)能够自动计算购买数量和总金额1. pay.html 购物车界面代码<html xmlns="http://www.w3.org/1999/xht...
复制链接

扫一扫

专栏目录