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

最新推荐文章于 2022-09-05 14:48:15 发布
w苏
最新推荐文章于 2022-09-05 14:48:15 发布
阅读量1.4k
点赞数
<!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>