文章标题 AngularJs购物车表格的制作

来源：互联网发布：mac软件为什么无法删除编辑：程序博客网时间：2024/05/16 07:11
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="angular.js"></script>    <script src="angular-route.js"></script>    <style>        .a{ width: 1400px; height: 500px; margin: 0 auto; margin-top: 120px}        .b{width: 1400px; height: 50px;}        .c{width: 1400px; height: 50px; }        .d{float: right; width: 150px; height: 50px;background-color: red}        .e{width: 1400px; height: 380px}        .h{ margin-top: 100px}        table{width: 1400px; height:400px}        .num{            width: 70px;            text-align: center;        }        .f{width: 150px; height: 50px; background-color: red}    </style></head><body ng-app="myAPP" ng-controller="myCtrl">  <div class="a">      <div class="b"><h2>我的购物车</h2></div>      <hr/>      <div class="c">          <input class="f" ng-click="deleteSel()" type="button" value="批量删除"/>          <button class="d" ng-click="removeAll()">清空购物车</button>      </div>      <div class="e">          <table ng-hide="getSize()" border="1" cellpadding="10" cellspacing="0">              <thead>              <tr>                  <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>                  <th>name</th>                  <th>price</th>                  <th>number</th>                  <th> totalPrice</th>                  <th>option</th>              </tr>              </thead>              <tbody>              <tr ng-repeat="x in users">                  <th><input ng-model="x.state" type="checkbox"/></th>                  <td>{{x.myname}}</td>                  <td>{{x.myprice | currency:"￥"}}</td>                  <td><button style="background-color: #0c60ee" ng-click="reduce($index)">-</button>                      <input type="number" class="num" ng-model="x.mynumber" ng-change="change($index)" />                      <button style="background-color: #0c60ee" ng-click="add($index)">+</button>                  </td>                  <td>{{x.myprice*x.mynumber  | currency:"￥"}}</td>                  <td><button style="background-color: #0c60ee" ng-click="remove($index)">删除</button></td></tr>              </tr>              <tr>                  <td colspan="6"><span>总价:</span><span ng-bind="totalQuantity() | currency:'￥'"></span></td>              </tr>              </tbody>          </table>          <p class="h" ng-show="getSize()">您的购物车为空，请先逛<a href="#">购物车</a></p>      </div>  </div></body><script>    var app=angular.module("myAPP",[]);    app.controller("myCtrl",function ($scope) {        $scope.users=[{            myname:"qq",myprice:"12.9",mynumber:2,mypriceone:"25.80"},            { myname:"wx",myprice:"23.90",mynumber:1,mypriceone:"23.90"},            { myname:"wx",myprice:"99.90",mynumber:1,mypriceone:"99.90"}];        //减少数量        $scope.reduce = function(index){            if( $scope.users[index].mynumber > 1){                $scope.users[index].mynumber--;            }else{                $scope.remove(index);            }        }        //添加数量函数        $scope.add = function(index){            $scope.users[index].mynumber++;        }        //所有商品总价函数        $scope.totalQuantity = function(){            var allprice = 0            for(var i = 0 ; i <$scope.users.length;i++ ){                allprice += $scope.users[i].mynumber * $scope.users[i].mypriceone;            }            return allprice;        }        //清空购物车        $scope.removeAll = function(){            if(confirm("你确定套清空购物车所有商品吗?")){                $scope.users = [];            }        }        //删除当前商品        $scope.remove = function(index){            if(confirm("确定要清空数据吗")){                $scope.users.splice(index,1)            }        }        //全选方法        $scope.selectAll = false;        $scope.selectAllFun = function(){            if($scope.selectAll){                for(index in $scope.users){                    $scope.users[index].state = true;                }            }else{                for(index in $scope.users){                    $scope.users[index].state = false;                }            }        }        //批量删除        $scope.deleteSel=function(){            var userNames=[];            for(index in $scope.users){                if($scope.users[index].state == true){                    userNames.push($scope.users[index].myname);                }            }            if(userNames.length>0){                if(confirm("是否删除选中项？")){                    for(i in userNames){                        var myname=userNames[i];                        for(i2 in $scope.users){                            if($scope.users[i2].myname==myname){                                $scope.users.splice(i2,1);                            }                        }                    }                }            }else{                alert("请选择删除的项")            }        }        //判断数据源的长度        $scope.getSize = function(){            if($scope.users.length > 0 ){                return false;            }else{                return true;            }        }    });</script></html>
阅读全文
0 0