购物车

最新推荐文章于 2024-04-03 20:09:48 发布

pizifusheng

最新推荐文章于 2024-04-03 20:09:48 发布

阅读量95

点赞数

分类专栏：咨询项目

本文链接：https://blog.csdn.net/pizifusheng/article/details/79999506

版权

咨询项目专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="App">
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js

"></script>
  <script type="text/javascript">
   var app=angular.module("App",[]);
   app.controller("Democtrl",function($scope){
    $scope.datas=
    [{ gid: 001, gname: "手机", gnum: 3, gprice: 1000, gcount: 3000 },
    { gid: 002, gname: "电脑", gnum: 3, gprice: 2000, gcount: 6000 },
    { gid: 003, gname: "电视", gnum: 6, gprice: 500,gcount: 3000 }];
    $scope.del=function($index){
     $scope.datas.splice($index,1);
    }
    $scope.orderkey="";
    $scope.counts=function(){
     var a=0;
     for (var i=0;i<$scope.datas.length;i++) {
      a+=$scope.datas[i].gnum;
     }
     return a;
    }
    $scope.prices=function(){
     var a=0;
     for (var i=0;i<$scope.datas.length;i++) {
      a+=$scope.datas[i].gnum*$scope.datas[i].gprice;
     }
     return a;
    }
    $scope.Alldel=function(){
     for (var i=$scope.datas.length;i>=0;i--) {
      $scope.datas.splice(i,1);
     }
    }
    $scope.chan=function($index){
     if ($scope.datas[$index].gnum<=0) {
      var f=confirm("确定要删除该产品吗？");
      if (f) {
       $scope.datas.splice($index,1);
      }
     }
    }
   })

  </script>
  <style type="text/css">
   tr:nth-child(odd){
    background-color: indianred;
   }
   tr:nth-child(even){
    background-color: greenyellow;
   }

  </style>
</head>
<body ng-controller="Democtrl" >
   <h1 style="text-align: center;">我的购物车详情</h1>
  <input type="text" placeholder="根据商品名称查询" ng-model="searchcommodity" style="margin-left: 725px;background-color: yellow;"/>
  <table border="1" cellspacing="0" cellpadding="1" style="margin-left: 380px;">
   <tr style="background-color: darkgrey;">
    <td >商品编号<input type="button" value="∧" ng-click="orderkey='gid'"/></td>
    <td >商品名称</td>
    <td >商品数量</td>
    <td >商品单价</td>
    <td >价格小计<input type="button" value="∨" ng-click="orderkey='-gnum*gprice'"/></td>
    <td >操作</td>
   </tr>
   <tr ng-repeat="x in datas | orderBy : orderkey |filter:{gname:searchcommodity}">
    <td >{{x.gid}}</td>
    <td >{{x.gname}}</td>
    <td ><input type="number" value="{{x.gnum}}" ng-model="x.gnum" ng-change="chan($index)"/></td>
    <td >{{x.gprice}}</td>
    <td >{{x.gnum*x.gprice}}</td>
    <td ><input type="button" value="移除" ng-click="del($index)"/></td></tr>
  </table>
  <div style="margin-left: 410px;">
   商品总数:{{counts()}}    商品总价:{{prices()}}
   <input type="button" value="清空购物车" ng-click="Alldel()" style="margin-left: 100px;background-color: yellow;"/>
  </div>
</body>
</html>

pizifusheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车

&lt;!DOCTYPE html&gt;&lt;html ng-app="App"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://cdn.static.runoob.com/libs/angul
复制链接

扫一扫