简单的购物车实现 +多选框

来源：互联网发布：java 代码混淆编辑：程序博客网时间：2024/05/29 07:57
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="angular1.4.6.min.js"></script>    <script src="angular-route.js"></script>    <style>        *{            margin: 0 auto;            padding: 0;        }        .head{            width: 100%;            height: 200px;            background-color: cadetblue;            font-size: 50px;            text-align: center;            line-height: 200px;        }        li{            list-style-type: none;            font-size: 20px;            margin-top: 50px;            text-align: center;        }        a{            text-decoration: none;        }        table{            border-collapse: collapse;            margin-top: 20px;        }        input{            margin-top: 10px;        }        th{            border: 1px solid black;            padding: 30px;        }        td{            border: 1px solid black;            padding: 30px;        }        .pi{            border: 1px solid red;            background: red;            color: white;        }        .shan{            background: orange;            border: 1px solid orange;            color: white;        }        .top{            color: red;        }    </style>    <script>        var myApp=angular.module("myApp",["ngRoute"]);        myApp.controller("newsCtrl",function ($scope) {            $scope.items=[                {bianhao:1234,name:"ipad",price:3400,kucun:10,check:false},                {bianhao:1244,name:"aphone",price:6400,kucun:100,check:false},                {bianhao:1334,name:"mypad",price:4400,kucun:20,check:false},                {bianhao:8234,name:"zpad",price:8400,kucun:130,check:false},            ]            /*排序*/            $scope.orderName="bianhao";            $scope.order=false;            $scope.paixu=function (column) {                if($scope.orderName==column)                {                    $scope.order=!$scope.order;                }else{                    $scope.order=false;                }                $scope.orderName=column;            };            $scope.getClass=function (column) {                if($scope.orderName==column)                {                    return "top"                }            }            $scope.chk=false;            $scope.xuanz=false;            $scope.check=function (val) {                if (val){                    $scope.xuanz=true;                }else{                    $scope.xuanz=false;                }            }            $scope.checkD=false;            $scope.xuan1=[];            $scope.xuan=function (xuan1,bianhao) {                console.log(bianhao);                $scope.checkD=xuan1;                if (xuan1){                    $scope.xuan1.push(bianhao);                }            }            $scope.del=function () {                //判断是否确认删除                if($scope.xuanz||$scope.checkD){                    var b=confirm("确认删除");                    if (b){                        //删除所有商品信息                        if($scope.chk){                            $scope.items.splice(0,$scope.items.length);                            //让商品信息管理页面为空白页面                        }else{                            for(var i=$scope.xuan1.length-1;i>=0;i--){                                console.log($scope.xuan1[i]);                                for(var j=0;j<$scope.items.length;j++){                                    console.log($scope.items[j].bianhao==$scope.xuan1[i]);                                    if($scope.items[j].bianhao==$scope.xuan1[i]){                                        $scope.items.splice(j,1);                                    }                                }                            }                        }                    }                }else{                    alert("先进行选中要删除的商品信息");                }            }            $scope.shanchu=function (index) {/*删除单个*/                if(confirm("确定删除吗?"))                {                    $scope.items.splice(index,1);                }            }        });    </script></head><body ng-app="myApp" ng-controller="newsCtrl"><div style="margin-left: 30px">    <input type="text" placeholder="输入关键字.." ng-model="search">    <button class="pi" ng-click="del()">批量删除</button>    <table>        <thead>        <tr>            <th><input type="checkbox" ng-model="chk" ng-click="check(chk)"></th>            <th ng-click="paixu('bianhao')" ng-class="getClass('bianhao')">商品编号</th>            <th ng-click="paixu('name')" ng-class="getClass('name')">商品名称</th>            <th ng-click="paixu('price')" ng-class="getClass('price')">商品价格</th>            <th ng-click="paixu('kucun')" ng-class="getClass('kucun')">商品库存</th>            <th>数据操作</th>        </tr>        </thead>        <tbody>        <tr ng-repeat="item in items|filter:search|orderBy:orderName:order">            <td><input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.bianhao)"></td>            <td>{{item.bianhao}}</td>            <td>{{item.name}}</td>            <td>{{item.price|currency:"￥:"}}</td>            <td>{{item.kucun}}</td>            <td><button class="shan" ng-click="shanchu($index)">删除</button></td>        </tr>        </tbody>    </table></div></body></html>
阅读全文
0 0