angular实现购物车后台订单的增加，删除功能功能（有效果图）

最新推荐文章于 2023-01-03 20:22:34 发布
最新推荐文章于 2023-01-03 20:22:34 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： angular 文章标签：

最终效果图：
这里写图片描述

实现全部代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/angular.min.js" ></script>
    <script type="text/javascript" src="js/angular-route.js" ></script>
    <style>
        #tid1{
            font-size: 12px;
            text-align: center;
        }
        #tid1 thead{
            background: gray;
        }
        #tid1 tbody tr:nth-child(odd){
            background: gainsboro;
        }
        button{
            padding: 5px;
            background: green;
            color: #FFFFFF;
            border-radius: 5px;
            border: 0;
        }
        #btntj{
            padding: 5px;
            background: green;
            color: #FFFFFF;
            border-radius: 5px;
            border: 0;
        }
        #ul1{
            font-size: 11px;
            width: 180px;
            background-color: lightpink;
            color: darkred;
            border-radius: 4px;
            padding: 5px 5px;
        }
        /*错误提示的边框*/
        .errorRed{
            border: 1px solid red;
        }

    </style>
    <script>
        var app =angular.module("myApp",['ngRoute']);

        //路由
        app.config(["$routeProvider",function($routeProvider){
            $routeProvider
                .when("/",{template:""})
                .when("/addNewDingdan",{
                    templateUrl:"addNewDingdan.html",
                    controller:"addNewCtrl"
                })
                .otherwise({redirectTo:"/"});
        }]);

        //路由里面 添加订单的操作
        app.controller("addNewCtrl",function($scope,$location){
            $scope.errorArr = [];//错误提示的数组,,如果有 输入不合格的 就添加到数组里

            $scope.submitAdd = function(){
                $scope.errorArr = [];//每次点击时候清空数组
                $scope.hasError = false;//是否有误

                $scope.addGnameClass = "";
                $scope.addUnameClass = "";
                $scope.addTelClass = "";

                //点击事件里面,,判断各输入框是否合法
                if($scope.addGname==""||$scope.addGname==undefined||$scope.addGname.trim()==""){
                    $scope.errorArr.push("商品名不能为空！");
                    $scope.addGnameClass = "errorRed";//对应的框变红
                    $scope.hasError = true;
                }
                if($scope.addUname==""||$scope.addUname==undefined||$scope.addUname.trim()==""){
                    $scope.errorArr.push("用户名不能为空！");
                    $scope.addUnameClass = "errorRed";//对应的框变红
                    $scope.hasError = true;
                }
                if($scope.addTel == undefined || $scope.addTel == "" || $scope.addTel.trim() == ""){
                    $scope.errorArr.push("手机号不能为空！");
                    $scope.addTelClass = "errorRed";//对应的框变红
                    $scope.hasError = true;
                }
                if ($scope.addCity == undefined || $scope.addCity == "" || $scope.addCity.trim() == "") {
                    $scope.errorArr.push("请选择城市！");
                    $scope.hasError = true;
                }

                if($scope.addGname.trim().length<6||$scope.addGname.trim().length>20){
                    $scope.errorArr.push("商品名必须是6-20个字符！");
                    $scope.addGnameClass = "errorRed";//对应的框变红
                    $scope.hasError = true;
                }
                if($scope.addUname.trim().length<4||$scope.addUname.trim().length>16){
                    $scope.errorArr.push("用户名必须是4-16个字符！");
                    $scope.addUnameClass = "errorRed";//对应的框变红
                    $scope.hasError = true;
                }
                if($scope.addTel.trim().length!=11){
                    $scope.errorArr.push("手机号格式不正确！");
                    $scope.addTelClass = "errorRed";//对应的框变红
                    $scope.hasError = true;
                }

                //判断hasError的值
                if($scope.hasError){
                    return;
                }
                //拿到id最大值,
                var indexMax = 0;
                for(var i=0;i<$scope.goods.length;i++){
                    if($scope.goods[i].id>indexMax){
                        indexMax = $scope.goods[i].id;
                    }
                }
                //添加到数组里
                $scope.goods.push({
                    id:indexMax+1,//最大值加1
                    gname:$scope.addGname,
                    uname:$scope.addUname,
                    tel:$scope.addTel,
                    price:6967.00,
                    city:$scope.addCity,
                    buyTime:"10-25 16:00",
                    state:"发货",
                    checkState:false
                });

                $location.path('/');
            };
        });
        app.controller("myCtrl",function($scope,$location){
            $scope.goods = [{
                id:1,
                gname:"iPhone4",
                uname:"张三",
                tel:15111111111,
                price:4999.00,
                city:"北京",
                buyTime:"08-01 10:00",
                state:"发货",
                checkState:false
            },{
                id:2,
                gname:"小米6",
                uname:"李四",
                tel:15222222222,
                price:2999.00,
                city:"北京",
                buyTime:"08-02 10:00",
                state:"发货",
                checkState:false
            },{
                id:3,
                gname:"华为P9",
                uname:"王五",
                tel:15333333333,
                price:3999.00,
                city:"上海",
                buyTime:"09-03 10:00",
                state:"已发货",
                checkState:false
            },{
                id:4,
                gname:"OPPO R11",
                uname:"赵六",
                tel:15444444444,
                price:4999.00,
                city:"天津",
                buyTime:"09-04 10:00",
                state:"已收货",
                checkState:false
            },{
                id:5,
                gname:"vivo",
                uname:"周七",
                tel:15555555555,
                price:2999.00,
                city:"重庆",
                buyTime:"10-04 10:00",
                state:"已发货",
                checkState:false
            }];


            //点击 新增订单 按钮 跳转路由
            $scope.goToUrl = function(url){
                $location.path(url);
            };

            //默认状态下是
            $scope.cityC = "选择城市";
            //下拉菜单选择城市
            $scope.cityChaxun = function(city,cityC){
                if($scope.cityC== "选择城市"){
                    return true;
                }else{
                    if(city==cityC){
                        return true;
                    }else{
                        return false;
                    }
                }
            };

            //默认的选择状态
            $scope.stateC = "选择状态";
            $scope.stateChaxun = function(state,stateC){
                if($scope.stateC== "选择状态"){
                    return true;
                }else{
                    if(state==stateC){
                        return true;
                    }else{
                        return false;
                    }
                }
            };

            $scope.startMonthC = "开始月份";
            $scope.endMonthC = "结束月份";

            $scope.timeChaxun = function(buyTime,startMonthC,endMonthC){
                if($scope.startMonthC=="开始月份"||$scope.endMonthC=="结束月份"){
                    return true;
                }else{
                    var splitArr = buyTime.split(" ");
                    //alert(splitArr[0]);前面的日期 08-01
                    var timeSplitArr = splitArr[0].split("-");
                    //alert(timeSplitArr[0]);//08
                    //转码 必须转码
                    var numberBuyTime = parseInt(timeSplitArr[0]);
                    if(numberBuyTime>=$scope.startMonthC&&numberBuyTime<=$scope.endMonthC){
                        return true;
                    }else{
                        return false;
                    }
                }
            }


            //当待发货时候  点击 发货按钮,改变状态
            $scope.djFahuo = function(index){
                $scope.goods[index].state = "已发货";
            };

            //一开始默认是全不选
            $scope.checkedAll = false;
            var a=0;
            //正着全选
            $scope.selectAll =function(){
                if($scope.checkedAll){
                    for(var i=0;i<$scope.goods.length;i++){
                        $scope.goods[i].checkState = true;
                        a++;
                    }
                }else{
                    for(var i=0;i<$scope.goods.length;i++){
                        $scope.goods[i].checkState = false;
                        a--;
                    }
                }
            };

            //反着全选
            $scope.selectOne = function(index){
                if($scope.goods[index].checkState){
                    a++;
                }else{
                    a--;
                }

                if(a==$scope.goods.length){
                    //如果小按钮全部选中了,就让大的全选按钮也选中
                    $scope.checkedAll = true;
                }else{
                    $scope.checkedAll = false;
                }
            };

            //批量发货点击事件
            $scope.plFahuo = function(){
                if(a==0){
                    alert("请选择要批量发货的商品!");
                }else{
                    for(var i=0;i<$scope.goods.length;i++){
                        if($scope.goods[i].checkState){
                            $scope.goods[i].state = "已发货";
                            $scope.goods[i].checkState = false;
                            a--;
                        }
                    }
                    $scope.checkedAll = false;
                }
            };

            //批量删除点击事件
            $scope.plDelete = function(){
                if(a==0){
                    alert("请选择要批量删除的商品!");
                }else{
                    for(var i=0;i<$scope.goods.length;i++){
                        if($scope.goods[i].checkState){

                            $scope.goods.splice(i,1);
                            i--;//会出现下标越界,所以i--
                            a--;
                        }
                    }
                    $scope.checkedAll = false;
                }
            };
            //默认是以id正序排列
            $scope.lieming = "id";
            $scope.zhengfu = false;//默认是正的false
            //点击按钮 根据列名排序
            $scope.idSort = function(liem){
                if($scope.zhengfu==true){
                    $scope.zhengfu=false;
                }else{
                    $scope.zhengfu=true;
                }
                //赋值给列名
                $scope.lieming = liem;
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center width="68%" id="center1">
    <input style="width: 100px;font-size: 12px;" type="text" ng-model="yhmss" placeholder="用户名搜索"/>
    <input style="width: 100px;font-size: 12px;" ng-model="telss" type="text" placeholder="手机号搜索"/>
    <select ng-model="cityC">
        <option>选择城市</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>天津</option>
        <option>重庆</option>
        <option>厦门</option>
    </select>
    <select ng-model="stateC">
        <option>选择状态</option>
        <option value="发货">待发货</option>
        <option>已发货</option>
        <option>已收货</option>
    </select>
    <select ng-model="startMonthC">
        <option>开始月份</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
    </select>
    ~
    </select>
    <select ng-model="endMonthC">
        <option>结束月份</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
    </select>
    <br />
    <br />
    <button ng-click="goToUrl('/addNewDingdan')">新增订单</button>
    <button ng-click="plFahuo()">批量发货</button>
    <button ng-click="plDelete()">批量删除</button>
    <br /><br />
</center>
<center  id="center2">
    <table id="tid1" border="1" cellpadding="5" cellspacing="0" width="68%">
        <thead>
        <tr>
            <th>
                <input type="checkbox" ng-model="checkedAll" ng-click="selectAll()"/>
            </th>
            <th>ID
                <button ng-click="idSort('id')">排序</button>
            </th>
            <th>商品名</th>
            <th>用户名</th>
            <th>手机号</th>
            <th>价格
                <button ng-click="idSort('price')">排序</button>
            </th>
            <th>城市</th>
            <th>下单时间
                <button ng-click="idSort('buyTime')">排序</button>
            </th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="x in goods | orderBy:lieming:zhengfu | filter:{uname:yhmss} | filter:{tel:telss}"
            ng-if="cityChaxun(x.city,cityC)&&stateChaxun(x.state,stateC)&&timeChaxun(x.buyTime,startMonthC,endMonthC)">
            <td>
                <input type="checkbox" ng-model="x.checkState" ng-click="selectOne($index)"/>
            </td>
            <td>{{x.id}}</td>
            <td>{{x.gname}}</td>
            <td>{{x.uname}}</td>
            <td>{{x.tel}}</td>
            <td>{{x.price}}</td>
            <td>{{x.city}}</td>
            <td>{{x.buyTime}}</td>
            <!--根据发货状态不同 显示隐藏标签,-->
            <td>
                <span ng-if="x.state == '发货'"><a href="#" ng-click="djFahuo($index)">{{x.state}}</a></span>
                <span ng-if="x.state == '已发货'">{{x.state}}</span>
                <span ng-if="x.state == '已收货'">{{x.state}}</span>
            </td>
        </tr>
        </tbody>
    </table>
</center>

<script type="text/ng-template" id="addNewDingdan.html">
    <div style="border: 1px solid black;width: 50%;">
        <table>
            <caption>新增订单</caption>
            <tbody>
            <tr>
                <td>商品名</td>
                <td>
                    <input type="text" placeholder="6-20个字符" ng-model="addGname" ng-class="addGnameClass"/>
                </td>
            </tr>
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" placeholder="4-16个字符" ng-model="addUname" ng-class="addUnameClass"/>
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td>
                    <input type="text" ng-model="addTel" ng-class="addTelClass"/>
                </td>
            </tr>
            <tr>
                <td>城市</td>
                <td>
                    <select ng-model="addCity">
                        <option value="">选择城市</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>广州</option>
                        <option>天津</option>
                        <option>重庆</option>
                        <option>厦门</option>

                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div id="ul1" ng-show="hasError">
                        <ul>
                            <li ng-repeat="e in errorArr">
                                {{e}}
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button id="btntj" ng-click="submitAdd()">提交</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</script>
<br />
<center>
    <div ng-view=""></div>
</center>
</body>
</html>
小子逆袭
关注
专栏目录
Angularjs实现购物车功能(按钮增减数量、添加、全选、删除、批量删除、结算)
dxt0528的博客
12-20 984
.box{ width: 1000px; height: 600px; margin: 20px auto; background: yellow; padding-top: 40px; } table{ width: 800px; margin: 0px auto; } td{ border: 1px solid black; } var myapp=
angular调用接口方式_angularjs调用api接口
weixin_39765840的博客
12-19 3235
[Angularjs]视图和路由(三)写在前面上篇文章主要介绍了路由中when方法的第二个参数，常见的几个属性，以及作用。本篇文章，将介绍和路由相关的几个常见的服务。系列文章[Angularjs]ng-select和ng-options[Angularjs]ng-show和ng-hide[Angularjs]视图和路由(一)...文章ghost丶桃子2016-05-241557浏览量Angular...
购物车的后台源码+Jquery开发购物车计算功能 +Jquery开发购物车计算功能加动漫添加效果
02-24
文件是我在学习Jquery框架时下载的很有参考价值的三个不同源码（一个后台，二个前端），其中有购物车后台源码，和用Jquery开发的前端，一个前端仅仅实现了购物车结账的计算功能，另一个以动漫的效果实现添加产品到购物车和实现结账计算功能同时加入了删除功能。
angular 基本购物车()
xujiuba的博客
01-11 267
table tr:nth-child(even){ background: #EEEEEE; } table tr:nth-child(add){ background: #FFFFFF; } var app=angular.module("myApp",[]); app.controller("myCtrl",function($scope){ //准备数据
angularjs技术实现购物车加减页面，订单页面
Cc__xac__xac的博客
08-24 1340
购物车页面     var app=angular.module("myApp", []);          app.controller("myController",function($scope,$http){              $http.post("${pageContext.request.contextPath}/goods/select")
angular实现购物车功能
Sophie_U的博客
01-24 1179
一、页面搭建 1、html结构采用BootStrap3来快速创建一个购物车表单样式。 主要功能： A：列表数据所示 B：增加删除端口 C：清空购物车 D：商品数量的增减 E：动态计算商品价格以及总价 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta char
购物车
LSJ44的博客
10-25 1111
//MainActivity 页面package guobao.bwie.com.gwc;import android.app.Activity;import android.content.Context;import android.content.DialogInterface;import android.os.Bundle;import android.os.Handler;import
仿饿了么购物车
05-03
首先，购物车列表的实现通常基于前端框架，如React、Vue或Angular。这里我们可能会使用Vue.js，因为它以其轻量级、易于理解和组件化的特性受到开发者欢迎。在Vue中，我们可以创建一个名为`CartList`的组件，该组件...
同时实现前端和后台的综合案例
最新发布
05-29
1. 前端技术：我们可以使用 HTML、CSS 和 JavaScript 技术来构建网站的前端界面，并且使用 React、Angular 或者 Vue 等框架来实现界面的交互和动态效果。同时，我们还需要使用 AJAX 或者 WebSocket 技术来实现网站与...
网上商城前台+后台HTML源代码
06-24
虽然这里的资源主要提供的是HTML源代码，但通常商城的后台会使用PHP、Java、Python或.NET等服务器端语言来处理HTTP请求，实现数据的增删改查、用户管理、订单处理等功能。HTML源代码中的表单元素（如`<form>`、`...
购物车实战一：建立后台数据库
05-24
NULL 博文链接：https://sxpujs.iteye.com/blog/369817
仿购物车功能（添加、删除、结算、单选、全选商品等功能）
08-01
仿购物车功能（添加、删除、结算、单选、全选商品等功能）。运用到接口回调，bean绑定tag。
javascrip北大青鸟第四章增加删除订单的代码
05-16
javascrip北大青鸟第四章增加删除订单的代码
angular 点菜_无人点餐无人收银系统基础案例
weixin_39882394的博客
12-20 151
无人点餐无人收银系统基础案例创建项目创建一个含有路由的项目ng new angularproject --skip-install安装依赖npm install运行项目ng serve --open创建路由创建home组件ng g component components/home创建商品组件ng g component components/pcontent重构项目home.component....
购物车删除
gsc_19970804的博客
01-15 487
private Context context;     private List grouplist;     private List> childelist;     private double price = 0;     public Madapter(Context context, List grouplist, List> childelist) {      
Angular订单操作
qq_39972250的博客
10-25 234
Title             *{             margin: 0;             padding: 0;         }         body         {             width: 1600px;             margin: 0 auto;             margin-top: 50px;
angularJs购物汇总
Arrogant——玖零
10-25 251
lang="en">     charset="UTF-8">   Title     *{   margin: 0;   padding: 0;   }   body   {   width: 1600px;   margin: 0 auto;
电商网站之新增订单
m0_72710328的博客
01-03 413
新增订单功能,向面试官展示实力
Vue:购物车案例- 实现列表组件删除功能
qq_41421033的博客
11-20 740
Vue:购物车案例- 实现列表组件删除功能 从父组件把商品列表list 数据传递过来 即 父向子组件传值 把传递过来的数据渲染到页面上 点击删除按钮的时候删除对应的数据 给按钮添加点击事件把需要删除的id传递过来 子组件中不推荐操作父组件的数据有可能多个子组件使用父组件的数据 我们需要把数据传递给父组件让父组件操作数据 父组件删除对应的数据 <div id="app"> <div class="container"> <my-cart&g
Angular实现TodoList：代码示例与功能解析
本文将介绍如何使用Angular框架实现一个简单的toDoList应用，包括功能描述、核心代码示例以及交互细节。 在Angular中，toDoList应用是一个典型的CRUD（创建、读取、更新、删除）操作实例，它展示了Angular的数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值