您的位置：首页 > Web前端 > AngularJS

使用angularjs和bootstrap写一个简单的购物车

2016-05-02 16:30 591 查看

初学angularjs，联系编写一个简单的angularjs应用--购物车，只是模拟功能。

源代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap.min.css">//链入bootstrap文件
<script src="../../vendor/angular/angularjs.js" type="text/javascript"></script>//链入angularjs
</head>
<body ng-app="myApp">
<div ng-controller="firstController" class="container">
<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 cart">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<button type="button" ng-click="reduce(item.id)" class="btn btn-primary">-</button>
<input type="text" value="{{item.quantity}}" ng-model="item.quantity" />
<button type="button" ng-click="add(item.id)" class="btn btn-primary">+</button>
</td>
<td>{{item.price}}</td>
<td>{{item.price*item.quantity}}</td>
<td>
<button type="button" ng-click="remove(item.id)" class="btn btn-danger">移除</button>
</td>
</tr>
<tr>
<td>总购买价 </td>
<td>{{totalPrice()}}</td>
<td>总购买数量</td>
<td>{{totalQuantity()}}</td>
<td colspan="2"><button type="button" ng-click="cart = {}" class="btn btn-danger">清空购物车</button></td>
</tr>
</tbody>
</table>
<p ng-show="!cart.length">您的购物车为空</p>
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('firstController',function($scope){
//购物车物品
$scope.cart = [
{
id:1000,
name:'iphone5s',
quantity:3,
price:4300
},
{
id:3300,
name:'iphone5',
quantity:3,
price:3300
},
{
id:232,
name:'mac',
quantity:3,
price:23000
},
{
id:100,
name:'ipad',
quantity:3,
price:3300
},
];
//产品总价
$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;
}
//移除产品
$scope.remove = function(id){
var index =  findIndex(id);
if(index != -1){
$scope.cart.splice(index,1)
}
}
//增加数量
$scope.add = function(id){
var index = findIndex(id);
if(index != -1){
$scope.cart[index].quantity++;
}
}
$scope.reduce = function(id){
var index = findIndex(id);
if(index != -1){
var item = $scope.cart[index];
if(item.quantity >1) {
item.quantity--;
}
else{
var returnKey = confirm('是否从购物车删除该产品?');
if(returnKey)
$scope.remove(id);
}
}
}
var findIndex = function(id){
var index = -1;
angular.forEach($scope.cart, function(item, key){
if(item.id == id){
index = key;
}
});
return index;
}
$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;
}
})
},true);
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航