今天我和大家分享一个angular的购物车效果。希望能给刚入门的小伙伴们有点启发吧~~~
这里我采用了比较流行的bootstarpcss框架，友情提醒我们在做angular东西的时候,一定要抓住它的作用域$scope来展开，这样会让你少走弯路~~~
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body ng-controller="myController">
<table class="table table-bordered text-center table-hover">
<tr>
<td>
商品名称
</td>
<td>
商品价格
</td>
<td>
商品介绍
</td>
<td>
数量
</td>
<td>
操作
</td>
</tr>
<tr ng-repeat="items in data">
<td>{{items.shop}}</td>
<td>{{items.pirce}}</td>
<td>{{items.info}}</td>
<td>
<button class="btn btn-primary" ng-click="add($index)">+</button>
<input type="text" ng-model= items.num />
<button class="btn btn-danger" ng-click="reduce($index)">-</button>
</td>
<td>
<button class="btn btn-primary" ng-click="del($index)">删除</button>
</td>
</tr>
<tr ng-show=!getSize()>
<td colspan="4">总价</td>
<td>
<span class="text-muted">{{allSum()}}</span>
</td>
</tr>
<tr ng-show=getSize()>
<td colspan="5">
现在你的购物车空空如也,快点去抢购吧~~
</td>
</tr>
</table>
<script>
var app = angular.module("myApp",[]);
app.controller("myController",function($scope){
$scope.data = [
{"shop":"苹果7","pirce":5000,"info":"这是一款最新的手机","num":1},
{"shop":"男卫衣","pirce":800,"info":"这是一款最新的衣服","num":2},
{"shop":"男鞋子","pirce":500,"info":"这是一款最新的鞋子","num":2},
{"shop":"联想","pirce":6000,"info":"这是一款最新的电脑","num":1}
]
//总价钱
$scope.allSum = function(){
var allPrice = 0;
for (var i=0;i<$scope.data.length;i++) {
allPrice+= $scope.data[i].pirce*$scope.data[i].num
}
return allPrice
}
//增加
$scope.add = function(index){
$scope.data[index].num++
}
//减少
$scope.reduce = function(index){
if($scope.data[index].num>1){
$scope.data[index].num--
}else{
if(confirm("你是否要删除它呢？")){
$scope.data.splice(index,1)
}
}
}
//删除
$scope.del = function(index){
if(confirm("你真的要删除吗？5555")){
$scope.data.splice(index,1)
}
}
//判断是否还有商品
$scope.getSize = function(){
if($scope.data.length>0){
return false;
}else{
return true
}
}
})
</script>
</body>
</html>