购物车数量，总价，删除

最新推荐文章于 2021-03-18 21:32:48 发布

阳光鬼怪

最新推荐文章于 2021-03-18 21:32:48 发布

阅读量344

点赞数

分类专栏： 4月Android hybrid跨平台开发

本文链接：https://blog.csdn.net/qq_40087072/article/details/78332732

版权

4月Android hybrid跨平台开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.3.0.js"></script>
    <script src="jquery-1.11.0.js"></script>
    <script>
        var myapp= angular.module("myapp",[]);

        var data=[
            {
                done:false,
                id:"1234",
                name:"ipad",
                price:3400,
                quantity:1,

            },
            {
                done:false,
                id:1244,
                name:"iphone",
                price:6400,
                quantity:1

            },
            {
                done:false,
                id:1334,
                name:"mypad",
                price:4400,
                quantity:1,

            },
            {
                done:false,
                id:8234,
                name:"zpad",
                price:8400,
                quantity:1,

            }
        ]
        myapp.controller("myctrl",function ($scope) {
            $scope.data=data;

            //删除信息
            $scope.del=(function (hh) {
                var con=confirm("确定删除吗?");
                if(con==true){
                    for(var i=0;i<$scope.data.length;i++){
                        if($scope.data[i].name==hh)
                        {
                            $scope.data.splice(i,1);
                        }
                    }
                }
            });
            /*删除选中的*/
            $scope.delall=function () {
                var con=confirm("确定删除么?");
                if(con==true){
                    for(var i=0;i<$scope.data.length;i++)
                    {
                        if($scope.data[i].done==true)
                        {
                            $scope.data.splice(i,1);
                            i--;
                        }
                    }
                }else{

                }

            }

            /*全选*/
            $scope.checkAll=function () {
                for(var i=0;i<$scope.data.length;i++)
                {
                    if($scope.chec==true)
                    {
                        $scope.data[i].done=true;
                    }
                    else{
                        $scope.data[i].done=false;
                    }
                }
            }
            //减少数量
            $scope.reduce=function (index) {
                if($scope.data[index].quantity>1){
                    $scope.data[index].quantity--;
                }else{
                    $scope.del(data.name);
                }
            }
            //增加数量
            $scope.add = function(index){
                $scope.data[index].quantity++;
            }
            //所有商品总价
            $scope.totalQuantity=function () {

                var allprice = 0
                for(var i = 0 ; i <$scope.data.length;i++ ){
                    allprice += $scope.data[i].quantity * $scope.data[i].price;
                }
                return allprice;

            }
            //清空购物车
            $scope.qk = function(){

                if(confirm("您确定要清空购物车吗?")){

                    $scope.data=[];

                }
            }

        });


    </script>
</head>
<body ng-app="myapp" ng-controller="myctrl">

<div>
    <h3>商品库存信息管理</h3>
    <hr>
    <div style="background-color: #E8FBFF;height:25px">
    <input type="text" value="" placeholder="请输入关键字...." ng-model="search">
    <button type="button" style="margin-left: 1000px;color:#c3c3c3;background-color:red " ng-click="delall()">批量删除</button>
        <button type="button" style="color:#c3c3c3;background-color:red " ng-click="qk()">清空购物车</button>
    </div>
</div>

<div>
    <table  border="1" bordercolor="#c3c3c3" width="500" cellpadding="0" cellspacing="0" style="width:1350px;text-align: center">
        <tr>
            <td><input type="checkbox" ng-click="checkAll()" ng-model="chec"></td>
            <td >商品编号</td>
            <td >商品名称</td>
            <td >商品价格</td>
            <td >商品数量</td>
            <td >商品总价</td>
            <td >商品操作</td>

        </tr >
        <tr ng-repeat="item in data|filter:{'name':search}">
            <td><input type="checkbox" ng-model="item.done"></td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price|currency:"¥"}}</td>
            <td>
                <button ng-click="reduce($index)" class="button">-</button>

                <input type="text" class="num" ng-model="item.quantity" ng-change="change($index)"/>

                <button ng-click="add($index)" class="button">+</button>

            </td>
            <td>{{item.price * item.quantity|currency:"￥"}}</td>
            <td>
                <button style="color: #E8FBFF;background-color: yellow" ng-click="del(item.name)">删除</button>
            </td>

        </tr>
        <tr>
            <td>
                <span>总价:</span>
                <span ng-bind="totalQuantity()"></span>
            </td>
        </tr>

    </table>

</div>



</body>
</html>

阳光鬼怪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
购物车数量，总价，删除

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="angular-1.3.0.js">script> script src="jquery-1.11.0.js">script> script> var myapp= angular.m
复制链接

扫一扫