本文详细介绍了一个使用AngularJS框架实现的购物车应用程序。通过整合HTML、CSS和JavaScript，展示了如何构建一个具备商品添加、修改、删除及库存管理功能的交互式购物车。文章深入解析了AngularJS指令、控制器和服务的运用，以及如何通过模态框进行商品信息的编辑。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/shoppingCar.css" />
<script src="js/jquery.1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<title></title>
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="container">
<table class="table table-hover">
<thead>
<th>商品编号</th>
<th>商品名称</th>
<th>商品库存</th>
<th>商品价格</th>
<th>该产品总价值</th>
<th>操作</th>
</thead>
<tbody>
<tr ng-repeat="g in goods">
<td>{{g.fid}}</td>
<td>{{g.fname}}</td>
<td>
<button class="btn btn-info" ng-click="addOne(g)"><span class="glyphicon glyphicon-plus"></span></button>
<input type="text" ng-value="g.fcount" ng-model="g.fcount" ng-change="changeCount(g)" />
<button class="btn btn-info" ng-click="reduceOne(g)"><span class="glyphicon glyphicon-minus"></span></button>
</td>
<td>¥{{g.fprice}}</td>
<td>¥{{g.fprice*g.fcount}}</td>
<td>
<button class="btn btn-danger" ng-click="delSelf(g)">下架商品</button>
<!--<button class="btn btn-success">修改商品</button>-->
<button class="btn btn-success" data-toggle="modal" data-target="#updateProduct" ng-click="updateProductsBtn(g)">修改商品</button>
<!-- Modal -->
<div class="modal fade" id="updateProduct" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">修改商品</h4>
</div>
<div class="modal-body">
<form action="" name="updateForm">
<div class="form-group">
<label for="fid">请输入修改商品的ID</label>
<input ng-model="updateObj.fid" value="updateObj.fid" type="text" readonly="readonly" class="form-control" placeholder="请输入添加商品名称" name="fid">
</div>
<div class="form-group">
<label for="fname">请输入修改商品名称</label>
<input ng-model="updateObj.fname" value="updateObj.fname" type="text" class="form-control" placeholder="请输入添加商品名称" name="fname">
</div>
<div class="form-group">
<label for="fcount">请输入修改库存</label>t
<input ng-model="updateObj.fcount" ng-pattern="/^\+?[1-9][0-9]*$/" value="updateObj.fcount" type="text" class="form-control" placeholder="请输入商品库存" name="fcount">
<span class="text-danger" ng-show="updateForm.fcount.$invalid">库存只能大于等于1数值型</span>
</div>
<div class="form-group">
<label for="fprice">请输入修改单价</label>
<input ng-model="updateObj.fprice" ng-pattern="/^\+?[1-9][0-9]*$/" value="updateObj.fprice" type="text" class="form-control" placeholder="请输入商品单价" name="fprice">
<span class="text-danger" ng-show="updateForm.fprice.$invalid">商品单价必须大于0数值型</span>
</div>
</form>
</div>
<!--<pre ng-bind="updateObj|json">
{{updateObj}}
</pre>-->
<div class="modal-footer">
<button type="submit" ng-click="updateProduct()" class="btn btn-success btn-block">修改</button>
</div>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>上架商品总数量</td>
<td>{{getCounts()}}</td>
<td>上架商品总价值</td>
<td>¥{{getSumPrices()}}</td>
<td>
<button class="btn btn-danger" ng-click="emptyProduct()">清空所有上架商品</button>
</td>
<td>
<!--<button class="btn btn-info">添加商品</button>-->
<!-- Large modal -->
<button class="btn btn-info" data-toggle="modal" data-target="#addProduct" ng-click="addProductsBtn()">添加商品</button>
<!-- Modal -->
<div class="modal fade" id="addProduct" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">添加商品</h4>
</div>
<div class="modal-body">
<form action="" name="addProduct">
<div class="form-group">
<label for="fname">请输入添加商品名称</label>
<input ng-model="productObj.fname"class="form-control" name="fname" type="text" placeholder="请输入添加商品名称" name="fname">
</div>
<div class="form-group">
<label for="fcount">请输入商品库存</label>
<input ng-model="productObj.fcount" ng-pattern="/^[1-9]{1}[1-9]*$/" class="form-control" name="fcount" placeholder="请输入商品库存" name="fcount">
<span class="text-danger" ng-show="addProduct.fcount.$invalid">库存只能大于等于1</span>
</div>
<div class="form-group">
<label for="fprice">请输入商品单价</label>
<input ng-model="productObj.fprice" ng-pattern="/^[1-9]{1}[1-9]*$/" class="form-control" name="fprice" type="text" placeholder="请输入商品单价" name="fprice">
<span class="text-danger" ng-show="addProduct.fprice.$invalid">商品单价必须大于0</span>
</div>
</form>
</div>
<div class="modal-footer">
<button ng-click="addProducts()" type="submit" class="btn btn-success btn-block">添加</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
//注入angular.js模块
var myApp = angular.module("myApp", []);
//控制器
myApp.controller("myController", function($scope) {
$scope.goods = [
{ "fid": "1001", "fname": "iphone", "fcount": "1", "fprice": "3000" },
{ "fid": "1002", "fname": "ipad", "fcount": "2", "fprice": "2000" },
{ "fid": "1003", "fname": "lenvno", "fcount": "3", "fprice": "5000" },
{ "fid": "1004", "fname": "零食", "fcount": "2", "fprice": "3000" }
];
/**
* 获取到商品的总数量
*/
$scope.getCounts = function() {
var sum = 0;
for(var g in $scope.goods) {
sum += parseInt($scope.goods[g].fcount);
}
return sum;
}
/**
* 获取商品的总价值
*/
$scope.getSumPrices = function() {
var prices = 0;
for(var g in $scope.goods) {
prices += (parseInt($scope.goods[g].fcount) * parseFloat($scope.goods[g].fprice));
}
return prices.toFixed(2);
}
/**
*点击加号按钮 输入框的值加1
*/
$scope.addOne = function(g) {
if(parseInt(g.fcount) >= 1) {
g.fcount = parseInt(g.fcount) + 1;
}
}
/**
*点击减号按钮 输入框的值减1
*/
$scope.reduceOne = function(g) {
if(parseInt(g.fcount) <= 1) {
g.fcount = 1;
} else {
g.fcount = parseInt(g.fcount) - 1;
}
}
/**
* 库存数量改变事件
*/
$scope.changeCount = function(g) {
if(isNaN(g.fcount)) {
alert("请输入正确的数字!");
g.fcount = 1;
}
}
/**
* 点击下架商品删除本条数据
*/
$scope.delSelf = function(g) {
for(var i in $scope.goods) {
if(g == $scope.goods[i]) {
$scope.goods.splice(i, 1);
}
}
}
/**
* 清空上架商品
*/
$scope.emptyProduct = function() {
$scope.goods = [];
$scope.getCounts();
$scope.getSumPrices();
}
/**
* 商品添加按钮
*/
$scope.addProductsBtn=function(){
var maxId = 1000;
for (index in $scope.goods){
var id = parseInt($scope.goods[index]['fid']);
maxId = maxId > id ? maxId :id;
}
maxId += 1;
//新创建一个空产品对象
$scope.productObj = {
"fid":maxId,
"fname":"",
"fcount":"",
"fprice":""
}
}
/**
* 模态框添加按钮
*/
$scope.addProducts = function () {
//alert($scope.productObj['newId']+$scope.productObj['newName']+$scope.productObj['newCount']+$scope.productObj['newPrice']);
if(confirm("确定添加商品吗？")){
$scope.goods.push($scope.productObj);
}
$('#addProduct').modal('hide');
}
/**
* 修改商品按钮
*/
$scope.that = null;
$scope.updateProductsBtn = function (g) {
$scope.that = g;
//新创建一个空产品对象
$scope.updateObj = {
"fid":g['fid'],
"fname":g['fname'],
"fcount":g['fcount'],
"fprice":g['fprice']
}
}
/**
* 模态框修改按钮
*/
$scope.updateProduct = function () {
//alert(g.fname);
if (confirm("确定修改商品吗？")) {
$scope.that.fname = $scope.updateObj.fname;
$scope.that.fcount = $scope.updateObj.fcount;
$scope.that.fprice = $scope.updateObj.fprice;
//alert($scope.that.fname+$scope.that.fcount+$scope.that.fprice);
}
$("#updateProduct").modal('hide');
}
})
</script>
</body>
</html>
转载于:https://my.oschina.net/u/3382800/blog/879171
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
