angular实现的一个购物车效果

最新推荐文章于 2019-06-11 15:57:18 发布

原创最新推荐文章于 2019-06-11 15:57:18 发布 · 868 阅读

0 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

0 篇文章

订阅专栏

本文分享了一个使用Angular实现的购物车效果案例，通过Bootstraps CSS框架美化界面，并深入讲解了如何利用Angular的作用域来实现商品数量增减及总价计算等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天我和大家分享一个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>