购物车综合题 html

最新推荐文章于 2019-03-24 15:37:47 发布
AbyssalMagic
最新推荐文章于 2019-03-24 15:37:47 发布
阅读量369
点赞数
本文链接：https://blog.csdn.net/AbyssalMagic/article/details/78578764
版权
//五月第三周综合题
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="angular/angular.js" ></script>
        <script>
            var app=angular.module("myApp",[]);
            app.controller("myCtrl", function($scope){
                $scope.products=[{
                    "id":80,
                    "name":"iphone",
                    "price":5400,
                    state:false
                },{
                    "id":1200,
                    "name":"ipad mini",
                    "price":2200,
                    state:false
                },{
                    "id":500,
                    "name": "ipad air",
                    "price":2340,
                    state:false
                },{
                    "id": 290,
                    "name": "ipad",
                    "price": 1420,
                    state: false

                }, {
                    "id": 910,
                    "name": "imac",
                    "price": 15400,
                    state: false
                }];
                    //点击列明进行排序
        /*      $scope.orderFlag = "";
                $scope.orderLine = "id";
                $scope.orderProduct = function(line) {
                    $scope.orderLine = line;
                    if($scope.orderFlag == "") {
                        $scope.orderFlag = "-";
                    } else {
                        $scope.orderFlag = "";
                    }
                }*/
                //点击列明进行排序
                $scope.selOrder;
                //下拉菜单删选商品价格
                //下拉菜单删选商品价格、
                $scope.productPrice = "--请选择--";
                $scope.ifShow = function(price) {
                    if($scope.productPrice == "--请选择--") {
                        return true;
                    } else {
                        var arr = $scope.productPrice.split("-");
                        var priceMin = arr[0];
                        var priceMax = arr[1];
                        if(price < priceMin || price > priceMax) {
                            return false;
                        } else {
                            return true;
                        }
                    }
                }
            //点击删除按钮，删除当前商品
            $scope.delProduct=function(delName){
                for (index in $scope.products) {
                    if(delName==$scope.products[index].name){
                        $scope.products.splice(index,1);
                    }else{

                    }
                }
            }
            //定义下拉菜单排序规则
            /*$scope.selOrder;
            $scope.orderSel = function() {
                    if($scope.selOrder == "id") {
                        $scope.orderFlag = "";
                        $scope.orderLine = "id";
                    } else if($scope.selOrder == "-id") {
                        $scope.orderFlag = "-";
                        $scope.orderLine = "id";
                    } else if($scope.selOrder == "price") {
                        $scope.orderFlag = "";
                        $scope.orderLine = "price";
                    } else if($scope.selOrder == "-price") {
                        $scope.orderFlag = "-";
                        $scope.orderLine = "price";
                    };
                }*/
                //修改价格
            $scope.updatePrice = function(price) {
                    //获得价格
                    for(index in $scope.products) {
                        //alert("删除前，角标为"+index+"长度为："+$scope.products.length);
                        if(price == $scope.products[index].price) {
                            //$scope.products.splice(index, 1);
                            //alert("删除后，角标为"+index+"长度为："+$scope.products.length);
                            //修改价格
                            var result = parseInt(window.prompt("清输入要修改的价格", price));

                            //在这之前对result的结果进行非字符串判断
                            if(result < 0) {
                                alert("输入有误，请重新更改");
                            } else {
                                if(window.confirm("确定要将" + $scope.products[index].name + "的价格更改为：" + result + "吗？")) {
                                    $scope.products[index].price = result;
                                };
                            }

                        } else {

                        }
                    }
                }
//全选、全不选
                $scope.selectAll = false;
                $scope.selectAllFun = function() {
                    if($scope.selectAll) {
                        for(index in $scope.products) {
                            $scope.products[index].state = true;
                        }
                    } else {
                        for(index in $scope.products) {
                            $scope.products[index].state = false;
                        }
                    }
                }
            //反选
                $scope.checkSelecetAll = function() {
                    var flag = false;
                    //遍历数组，获得对象的状态
                    for(index in $scope.products) {
                        //alert($scope.products[index].state);
                        //如果有一个对象状态是false即未选中状态，就把标志位flag变为true。
                        if(!$scope.products[index].state){
                            flag = true;
                        }
                    }
                    //判断是否没有一个是未选中状态
                    if(flag){//这是正面至少有一个未选中
                        $scope.selectAll = false;//全选状态为false
                    }else{//一定是全部被选中
                        $scope.selectAll = true;//全选状态为true
                    }
                }
                    //批量删除
                $scope.delSelect = function(){
                    //自己添加选中状态判断，就是有没有一个都没选中的情况。

                    //定义一个空数组，盛放状态是选中的对象
                    var isSelected = [];
                    //遍历数组，通过数组对象的状态，判断是否删除当前遍历的对象
                    for(index in $scope.products) {
                        //如果遍历的当前对象状态为true，则删除
                        if($scope.products[index].state){
                            //把当前选中的对象，一个个追加到isSelected数组中。
                            isSelected.push($scope.products[index]);
                            //alert(isSelected.length);
                        }
                    }

                    //遍历isSelected数组，因为isSelected数组中存放的是所有选中项的对象。
                    for(index in isSelected){
                        var name = isSelected[index].name;
                        for(index2 in $scope.products){
                            if(name == $scope.products[index2].name){
                                $scope.products.splice(index2,1);
                            }
                        }
                    }
                }
            });

        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <center>
            <h3>购物车</h3>
            <input type="text" size="10" placeholder="产品名称" ng-model="search"/>产品价格
            <select ng-model="productPrice">
                <option>--请选择--</option>
                <option>2001-3000</option>
                <option>3001-4000</option>
                <option>4001-5000</option>
                <option>5001-6000</option>
                <option>6001-7000</option>
                <option>7001-8000</option>
                <option>8001-无穷大</option>
            </select>
            <select ng-model="selOrder">                
                <option value="">排序方式</option>
                <option value="id">id正序</option>
                <option value="-id">id逆序</option>
                <option value="price">价格正序</option>
                <option value="-price">价格逆序</option>
            </select>
            <button ng-click="delSelect()">批量删除</button>
            <br/><br/>
            <table border="1px solid blue" cellpadding="10" cellspacing="0">
                <tr>
                    <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
                    <th ng-click="orderProduct('id')">产品编号</th>
                    <th ng-click="orderProduct('name')">产品名称</th>
                    <th ng-click="orderProduct('price')">产品价格</th>
                    <th>操作</th>
                </tr>
                <tr ng-repeat="sz in products | filter:{'name':search} | orderBy:selOrder" ng-if="ifShow(sz.price)" >                   
                    <td><input type="checkbox" ng-model="sz.state" ng-click="checkSelecetAll()"/></td>
                    <td>{{sz.id}}</td>
                    <td>{{sz.name}}</td>
                    <td>{{sz.price}}</td>
                    <td>
                        <button ng-click="delProduct(sz.name)">删除</button>
                        <button ng-click="updatePrice(sz.price)">修改</button>
                    </td>
                </tr>
            </table>
        </center>
    </body>
</html>
AbyssalMagic
关注
0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
购物车综合题 html

//五月第三周综合题<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular/angular.js" ></script> <script>
复制链接

扫一扫