澳门皇家娱乐顶点购物车

转自CSDN:

<!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.<strong>arr</strong>[i].<strong>price</strong>*$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">总金额</td>
            </tr>
        </table>
    </div>
</body>
</html>

澳门皇家娱乐 , 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图