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

angular购物车

2016-04-24 17:54 483 查看

<body ng-app>

<div class="container" ng-controller="carController">
<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" 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-primary">移除</button>
</td>
</tr>
<tr>

<td>总购买价</td>
<td>{{totalPrice()}}</td>
<td>总购买数</td>
<td>{{totalQuantity()}}</td>
<td colspan="2">
<button type="button" ng-click="clearAll()" class="btn btn-primary">清空购购物车</button>
</td>

</tr>
</tbody>
</table>
<p ng-show="!cart.length">你的购物车为空</p>
</div>

</body>

/**
* Created by bh on 2016/4/24.
*/
var carController = function($scope){
$scope.cart = [
{
id:1000,
name:"iphone5s",
quantity:3,
price:4300
},
{
id:3300,
name:"iphone5",
quantity:30,
price:3300
},
{
id:232,
name:"mac",
quantity:3,
price:23000
},
{
id:1400,
name:"ipad",
quantity:5,
price:6900
}
];

//计算总价
$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.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)
}
}

}
}

//移除
$scope.remove=function(id){
var index = findIndex(id)

if (index !== -1) {
$scope.cart.splice(index, 1)
}
}
$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
}
}
})
})

$scope.clearAll=function(){
$scope.cart = {}
}

}

格式：

var objs =[{a:1},{a:2}];
angular.forEach(objs, function(data,index,array){
//data等价于array[index]
console.log(data.a+'='+array[index].a);
});

参数如下：

objs：需要遍历的集合

data:遍历时当前的数据

index:遍历时当前索引

array:需要遍历的集合，每次遍历时都会把objs原样的传一次。

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

标签：

相关文章推荐

新的分享

章节导航