angular js 终极购物车

来源：互联网发布：win10 linux安装教程编辑：程序博客网时间：2024/06/15 17:58
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>购物车</title>    <script src="angularjs/angular.js"></script>    <style>        .box{            width: 100%;            border-bottom: 1px solid silver;        }        .box1{            width: 100%;            margin-top: 5px;        }        .box1 button{            width: 100px;            height: 40px;            background: crimson;            color: white;            text-align: center;            line-height: 40px;            float: right;            border: 0;            border-radius: 13px;        }        table{            width: 100%;        }        tr td button{            background: blue;            color: white;            border: 0;        }    </style>    <script>        var my=angular.module("my",[]);        my.controller("mys",function ($scope) {            /*声明数据对象，初始化商品信息，数据自拟且不低于四条*/            $scope.arr=[                {name:"qq",price:12.9,number:2,state:false},                {name:"wx",price:23.9,number:1,state:false},                {name:"aa",price:99.9,number:1,state:false},                {name:"bb",price:10.9,number:5,state:false}            ];            /*删除条目*/            $scope.del=function (index) {                if(confirm("确定移除此项嘛？")){                    $scope.arr.splice(index,1);                }            }            /*点击”+”按钮输入框中的数量加1,同时可以计算出商品小计,和购物 车总价*/            $scope.jia=function (index) {                $scope.arr[index].number++;            }            /*当点击”-”按钮时输入框中的数量减1,商品小计和总价*/            $scope.jian=function (index) {                if($scope.arr[index].number>1){                    $scope.arr[index].number--;                }                else if($scope.arr[index].number==1){                    if(confirm("用户是否删除该商品")){                        $scope.arr.splice(index,1);                    }                }            }            /*计算总价格*/            $scope.allSum=function () {                var allPrice=0;                for(var i=0;i<$scope.arr.length;i++){                    allPrice+=$scope.arr[i].price*$scope.arr[i].number;                }                return allPrice;            };            /*清空购物车*/            $scope.alldel=function () {                if($scope.arr.length==0){                    alert("您的购物车已空");                }else{                    $scope.arr=[];                }            }            /*用户点击第一个checkbox代表全选，全选商品后点击删除选中商品，选中商品被删除，   若购物车商品被全部删除后*/            $scope.allCheck=false;            $scope.allx= function () {                for(var i=0;i<$scope.arr.length;i++){                    if($scope.allCheck==true){                        $scope.arr[i].state=true;                    }else {                        $scope.arr[i].state=false;                    }                }            };            /*每个复选框*/            $scope.itemCheck = function () {                var flag = 0;                for(var i = 0; i<$scope.arr.length; i++){                    if($scope.arr[i].state == true){                        flag ++;                    }                }                if(flag == $scope.arr.length){                    $scope.allCheck = true;                }else{                    $scope.allCheck = false;                }            };            /*批量删除*/            $scope.pi=function () {                for(var i=0;i<$scope.arr.length;i++){                    if($scope.arr[i].state==true){                        $scope.arr.splice(i,1);                        i--;                        $scope.allCheck = false;                    }                }            }        });    </script></head><body ng-app="my" ng-controller="mys">    <div class="box">        <h2>我的购物车</h2>    </div>    <div class="box1">        <button ng-click="alldel()" style="margin-right: 10px">清空购物车</button><button ng-click="pi()" style="margin-left: 5px">批量删除</button>    </div>    <div class="box2">        <table border="1">            <tr>                <th><input type="checkbox" ng-model="allCheck" ng-click="allx()"/></th>                <th>name</th>                <th>price</th>                <th>number</th>                <th>totalPrice</th>                <th>option</th>            </tr>            <!--用ng-repaet指令将对象遍历并渲染到页面中-->            <tr ng-repeat="item in arr">                <td><input type="checkbox" ng-model="item.state" ng-click="itemCheck()"/></td>                <td>{{item.name}}</td>                <td>{{item.price | currency:"￥："}}</td>                <td><button ng-click="jian($index)">-</button>                    <input type="text" value="{{item.number}}" style="width: 30px;padding-left: 20px"/>                    <button ng-click="jia($index)">+</button>                </td>                <td>{{item.price*item.number | currency:"￥："}}</td>                <td><button ng-click="del($index)">删除</button></td>            </tr>            <tr>                <td colspan="6">总金额<span ng-bind="allSum()|currency:'￥：'"></span></td>            </tr>        </table>    </div></body></html>
阅读全文
0 0