angularJS购物车2

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.min.js" ></script>
       <script>
           //代入数据
           var app = angular.module("app",[]);
           app.controller("con1",function($scope){
               $scope.dates =[];
               var aa1 ={
                   gid: 001,
                   gname: '手机',
                   gnum: 3,
                   gprice: 1000,
                   gcount:3000
               };
               var aa2 ={
                   gid: 002,
                   gname: '电脑',
                   gnum: 3,
                   gprice: 2000,
                   gcount: 6000
               };
               var aa3 ={
                   gid: 003,
                   gname: '电视',
                   gnum: 6,
                   gprice: 500,
                   gcount: 3000
               };
               $scope.dates.push(aa1);
               $scope.dates.push(aa2);
               $scope.dates.push(aa3);
               //清空数据
               $scope.delall=function(){
                   $scope.dates.length=0;
               }
               //单个删除
               $scope.del=function(gname){
                   for (var i in $scope.dates) {
                       if ($scope.dates[i].gname==gname) {
                           $scope.dates.splice(i,1);
                       }
                   }
               }
               //总数量
               $scope.gnum=function(){
                   nub=0;
                   for (var i in $scope.dates) {
                       nub=nub+$scope.dates[i].gnum;
                   }
                   return nub;
               }
               //总金额
               $scope.gcount=function(){
                   nub=0;
                   for (var i in $scope.dates) {
                       nub=nub+$scope.dates[i].gnum*$scope.dates[i].gprice;
                   }
                   return nub;
               }
           })

       </script>
       <style>
           tr:nth-child(2n+1){
               background: green;
           }
           tr:nth-child(2n){
               background: palevioletred;
           }
       </style>
   </head>
   <body ng-app="app" ng-controller="con1">
       <div align="center">
       <h1>我的购物车详情</h1>
       <table border="1">
           <input type="text" placeholder="请根据名称查询" ng-model="name"/>
           <tr style="background: gray;">
               <th><select ng-model="px">
           <option value="">商品编号</option>
           <option value="+gid">编号正序排列</option>
       </select>
</th>
               <th>商品名称</th>
               <th>商品数量</th>
               <th>商品单价</th>
               <th><select ng-model="px">
                           <option value="">价格小计</option>
                           <option value="-gcount">价格倒序排列</option>
                   </select>
</th>
               <th>操作</th>
           </tr>
           <tr ng-repeat="d in dates|filter:{gname:name}|orderBy:px">
               <td>{{d.gid}}</td>
               <td>{{d.gname}}</td>
               <td><button ng-click="d.gnum=d.gnum-1">-</button>{{d.gnum}}<button ng-click="d.gnum=d.gnum+1">+</button></td>
               <td>{{d.gprice | currency:"￥"}}</td>
               <td>{{d.gcount=d.gnum*d.gprice | currency:"￥"}}</td>
               <td><button style="background: yellow;" ng-click="del(d.gname)">移除</button></td>
           </tr>
       </table>
       <button style="background: green;">商品数量{{gnum()}}</button>
       <button style="background: green;">商品总价{{gcount()}}</button>
       <button style="background: yellow;" ng-click="delall()">清空购物车</button>
       </div>
   </body>
</html>

猜你喜欢