angular购物车结算

最新推荐文章于 2018-05-17 20:57:19 发布

w98326angle

最新推荐文章于 2018-05-17 20:57:19 发布

阅读量229

点赞数

CC 4.0 BY-SA版权

分类专栏： angularJS 文章标签： angular购物车结算

本文链接：https://blog.youkuaiyun.com/w98326angle/article/details/78612807

angularJS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的购物车页面案例，该案例通过HTML和JavaScript实现了商品展示、数量增减、删除商品及总价计算等功能。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
   *{
    margin: 0;
    padding: 0;

   }
   .box{
    width: 310px;
    height: 400px;
    margin: auto;
    background: silver;
   }
   img{
    width: 80px;
    height: 80px;
   }
   dl{
    border-bottom: 1px solid silver;
    margin-bottom: 8px;
    padding: 5px;
    width: 300px;
    height: 80px;
    float: left;
   }
   dd{
    margin-bottom: 4px;
   }
   .che,.pic{
    float: left;
   }
   .pic{
    margin-left: 5px;
    margin-right: 5px;
   }
   .che{
    line-height:80px ;
   }
   .cont{
    font-size: 14px;
   }
   .price{
    font-size: 12px;
    color: sandybrown;
   }
   .jia,.jian{
    width: 20px;
    height: 20px;
   }
   .del{
    float: right;
    margin-right: 10px;
    color: red;
   }
  </style>
  <script type="text/javascript" src="js/angular.min.js" ></script>
  <script>
   angular.module("myApp",[]).controller("myCtrl",
function($scope) {
$scope.arrs = [{
  "id":1,
  "spic": "img/render1_1x.jpg",
  "stitle": "纯手工制作木质时钟精致家居装饰摆件",
  "sprice": 150,
  "snum": 1,
  "state":false
}, {
  "id":2,
  "spic": "img/space_1x.jpg",
  "stitle": "木质蓝牙音箱包邮实木家具装饰摆件",
  "sprice": 119,
  "snum": 2,
  "state":false
}, {
  "id":3,
  "spic": "img/trees_1x.jpg",
  "stitle": "装饰木雕，独特趣味设计家居装饰摆件",
  "sprice": 120,
  "snum": 1,
  "state":false
}]
//删除
$scope.del=function(a){
  for (var i=0;i<$scope.arrs.length;i++) {
   if($scope.arrs[i].id==a.id){
    $scope.arrs.splice(i,1);
   }
  }

}

//增加数量
$scope.jia=function(a){
   a.snum=a.snum+1;
}

//减少数量
$scope.jian=function(a){
  if(a.snum<=1){
   for (var i=0;i<$scope.arrs.length;i++) {
   if($scope.arrs[i].id==a.id){
    $scope.arrs.splice(i,1);
    }
   }
  }else{
   a.snum=a.snum-1;
  }
}
//总价
$scope.sumAll=function(){
  var sum=0;
  for (var i=0;i<$scope.arrs.length;i++) {
   if($scope.arrs[i].state){
    sum+=$scope.arrs[i].snum*$scope.arrs[i].sprice;
   }
  }
  return sum;
}
//全选
$scope.check=function(){
  var is=$scope.ischeck;
  for(var i=0;i<$scope.arrs.length;i++){
   $scope.arrs[i].state=is;
  }
}

//选中的数量
$scope.numAll=function(){
  var num=0;
  for (var i=0;i<$scope.arrs.length;i++) {
   if($scope.arrs[i].state){
    num+=$scope.arrs[i].snum;
   }
  }
  return num;
}

});

  </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">


  <div class="box">
   <h2 style="text-align: center;margin-bottom: 8px;margin-top: 8px;">购物车</h2>
   <hr />
   <input type="checkbox" style="margin-top: 20px;margin-bottom: 10px;"/> 趣艺工坊
   <hr />
   <dl ng-repeat="a in arrs">
    <dd class="che"><input type="checkbox" ng-model="a.state"/></dd>
    <dt class="pic"><img src={{a.spic}}></dt>
    <dd class="cont">{{a.stitle}}</dd>
    <dd class="price">{{a.sprice|currency:"￥"}}</dd>
    <div class="chang">
     <input type="button" value="-" class="jian" ng-click="jian(a)"/>
     <span class="num">{{a.snum}}</span>
     <input type="button" value="+" class="jia" ng-click="jia(a)"/>
     <input type="button" value="删除" class="del" ng-click="del(a)"/>
    </div>
   </dl>



  </div>
  <div style="width: 310px;height: 60px;background: saddlebrown;margin: auto;">
    <input type="checkbox" style="float: left;" ng-model="ischeck" ng-click="check()"/> 全选

   <input type="button" value="结算" style="background: sandybrown;color: white; float: right;"/>
   <p style="float: right;">合计：<span ng-bind="sumAll()|currency:'￥：'"></span>数量：<span ng-bind="numAll()"></span></p>
   </div>

</body>
</html>