Angular 购物车

来源：互联网发布：海关总署稽查司的数据编辑：程序博客网时间：2024/06/01 23:10

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>

       <script>
           var app = angular.module("myapp", []);
           app.controller("my", function($scope) {
               //模拟数据
               $scope.user = [{
                   mingzi: "qq",
                   jiage: 10,
                   shuliang: 2

               }, {
                   mingzi: "wx",
                   jiage: 20,
                   shuliang: 10

               }, {
                   mingzi: "wx",
                   jiage: 10,
                   shuliang: 10

               }];


               //清空购物车
               $scope.delall = function() {
                   $scope.user = [];
                   //全部删除，把表格也清除
                   $(function(){
                       $("table").hide();
                       alert(" 购物车为空,去逛商场;");
                   })
               }


               //删除
               $scope.del = function(index) {
                   if(confirm("确定要删除吗？")) {
                       $scope.user.splice(index, 1);
                   }
               }


               //+,-号，添加或减少
               //shuliang：是在+，-定义的名字
               $scope.shuliang = function(index, unm) {
                   $scope.user[index].shuliang = $scope.user[index].shuliang + unm;
                   if($scope.user[index].shuliang <= 0) {
                       alert("是否删除该商品");
                       $scope.user.splice(index, 1);
                   }
               }


               //计算总价
               $scope.zonghe = function() {
                   var sum = 0;
                   for(var i = 0; i < $scope.user.length; i++) {
                       sum += $scope.user[i].jiage * $scope.user[i].shuliang;
                   }
                   return sum;
               }
           });
       </script>
   </head>

   <body ng-app="myapp" ng-controller="my">
       <h1>我的购物车</h1>
       <button ng-click="delall()" style="margin-left: 800px;">清空购物车</button>
       <table border="1">
           <tr>
               <td>
                   <input type="checkbox" ng-model="quanxuan" />
               </td>
               <td>name</td>
               <td>price</td>
               <td>number</td>
               <td>totaPrice</td>
               <td>option</td>
           </tr>

           <tr ng-repeat="i in user">
               <td>
                   <input type="checkbox" ng-checked="quanxuan" ng-model="i.shan" />
               </td>
               <td>{{i.mingzi}}</td>
               <td>{{i.jiage | currency:"¥"}}</td>
               <td>
                   <button ng-click="shuliang($index,+1)">+</button>
                   <input ng-model="i.shuliang" />
                   <button ng-click="shuliang($index,-1)">-</button>
               </td>
               <td>{{i.jiage * i.shuliang}}</td>
               <td>
                   <button ng-click="del($indel)">删除</button>
               </td>



               <tr>
                   <td colspan="2">总价：</td>
                   <td colspan="4">{{zonghe() | currency:"¥"}}</td>
               </tr>
           </tr>
       </table>
   </body>

</html>

阅读全文

0 0