商品订单信息管理例子(Angularjs)

最新推荐文章于 2022-12-12 16:53:48 发布
最新推荐文章于 2022-12-12 16:53:48 发布
阅读量529 收藏
点赞数
文章标签： angularjs 管理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40321535/article/details/78802072
版权 
<!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/jquery-3.2.1.min.js"></script>
        <style>
            * {
                font-size: 12px;
            }

            #div1 {
                width: 650px;
                border: 1px solid #22505F;
            }

            button {
                color: #22505F;
                border-radius: 4px;
                border: 1px solid #22505F;
                background-color: #5CD6FF;
            }

            input {
                border-radius: 10px;
                border: 1px solid #22505F;
            }

            table {
                border-right: 1px solid #22505F;
                border-top: 1px solid #22505F;
            }

            td {
                border-left: 1px solid #22505F;
            }

            td:nth-child(1) {
                width: 25px;
            }

            td:nth-child(2) {
                width: 55px;
            }

            td:nth-child(3) {
                width: 80px;
            }

            td:nth-child(4) {
                width: 70px;
            }

            td:nth-child(5) {
                width: 100px;
            }

            td:nth-child(6) {
                width: 83px;
            }

            td:nth-child(7) {
                width: 60px;
            }

            td:nth-child(8) {
                width: 122px;
            }

            td:nth-child(9) {
                width: 50px;
            }

            tr:nth-child(even) {
                background-color: #EEEEEE;
            }

            .true {
                display: inline-block;
                border-radius: 5px;
                background-color: greenyellow;
            }

            .false {
                display: inline-block;
                border-radius: 5px;
                background-color: yellow;
            }
        </style>
    </head>

    <body ng-app="Mapp" ng-controller="Mctrl">
        <div id="div1">
            <button>新增订单</button>
            <button ng-click="alldel()">批量删除</button>
            <input style="margin-left: 44px;" type="text" id="" value="" placeholder="按商品名称查询..." ng-model="ng_goods" ng-keydown="selgoods($event)" />
            <input type="text" id="" value="" placeholder="按手机号查询..." ng-model="ng_tel" ng-keydown="seltel($event)" />
            <select ng-change="changestutas()" ng-model="change" ng-init="change=ss[0]">
                <option ng-repeat="s in ss">{{s}}</option>
            </select>
            <table cellspacing="0" cellpadding="0">
                <tr style="background-color: #999999;">
                    <td><input type="checkbox" name="" id="" value="" ng-click="all()" ng-model="all2" /></td>
                    <td>id<button ng-click="order_id()">排序</button></td>
                    <td>商品名</td>
                    <td>用户名</td>
                    <td>手机号</td>
                    <td>价格<button ng-click="order_price()">排序</button></td>
                    <td>城市</td>
                    <td>下单时间<button ng-click="order_time()">排序</button></td>
                    <td>状态</td>
                </tr>
                <tr ng-repeat="i in items">
                    <td><input type="checkbox" name="" id="" value="" class="checked1" ng-click="aclick($index)" /></td>
                    <td>{{i.id}}</td>
                    <td>{{i.goods}}</td>
                    <td>{{i.name}}</td>
                    <td>{{i.tel}}</td>
                    <td>{{i.price|currency:'￥:'}}</td>
                    <td>{{i.city}}</td>
                    <td>{{i.downtime|date:"MM-dd HH:mm:ss"}}</td>
                    <td><span ng-click="fahuo($index)" class="{{i.status1}}">{{i.status1|mFilter}}</span></td>
                </tr>
            </table>
            <fieldset style="width: 222px;">
                <legend>添加订单信息</legend>
                商品名 <input type="text" id="fiel_good" value="" ng-model="fiel_good" style="width: 180px;" /><br /> 用户名 <input type="text" id="fiel_name" value="" ng-model="fiel_name" style="width: 180px;" /><br /> 手机号 <input type="text" id="fiel_tel" value="" ng-model="fiel_tel" style="width: 180px;" /><br /> 价格为 <input type="text" id="fiel_price" value="" ng-model="fiel_price" style="width: 180px;" /><br /> 城市为
                <select ng-model="fiel_city" ng-init="fiel_city='北京'" style="width: 182px; border-radius: 10px;border: 1px solid #22505F;">
                    <option>北京</option>
                    <option>郑州</option>
                    <option>上海</option>
                </select>
                <input type="button" value="保存" ng-click="savedata()" style=" border-radius: 5px;border: 1px solid #22505F;padding: 5px 18px;background-color: white;margin-left: 77px;" />
            </fieldset>
        </div>
        <!--
            $scope.items显示内容数组
            items存放内容数组(增删改查都是对此数组)
            arrtemp临时数组用于查到的内容存放
            内容介绍:
            1在订单搜索框中，输入商品名称可以动态按商品名称进行查询列表信息;
            2在输入框中输入用户手机号即可根据用户手机动态查询出符合要求的信息;
            3以根据订单状态过滤订单信息，订单状态有二种，分别是已发货，未发货。
               如：用户点击下拉菜单选择”已发货”则查询出已发货的所有订单
            4用户点击”未发货”按钮时此时状态改变为已发货状态，按钮变为绿色
            5批量删除功能。用户只能删除已发货订单，不能删除未发货订单，用户点击多个已发货订单时可以批量删除选中订单
            6订单列表展示用户可以根据订单ID或商品价格或订单时间进行排序。当用户第一次点击排序时按正序排列，再点击排序时则按倒序排列
        -->
        <script>
            angular.module("Mapp", [])
                .controller("Mctrl", function($scope) {
                    $scope.ss = ["--按状态查询--", "已发货", "未发货"]
                    var items = [{
                            id: 2001,
                            goods: 'iPhoneX',
                            name: '张三',
                            tel: '13525565588',
                            price: 8699,
                            city: '北京',
                            downtime: new Date(1501911189494).getTime(),
                            isChecked: false,
                            status1: false
                        },
                        {
                            id: 3006,
                            goods: 'iPhone6',
                            name: '王红',
                            tel: '18945565588',
                            price: 5635,
                            city: '郑州',
                            downtime: new Date(1501981189494).getTime(),
                            isChecked: false,
                            status1: false
                        },
                        {
                            id: 5312,
                            goods: 'iPhone7',
                            name: '赵小龙',
                            tel: '13547871211',
                            price: 6180,
                            city: '北京',
                            downtime: new Date(1501001189494).getTime(),
                            isChecked: false,
                            status1: false
                        },
                        {
                            id: 2132,
                            goods: 'iPhone8',
                            name: '孙强',
                            tel: '14956156545',
                            price: 7190,
                            city: '上海',
                            downtime: new Date(1501111189494).getTime(),
                            isChecked: false,
                            status1: false
                        },
                    ];
                    $scope.items = items;

                    //点击发货状态
                    $scope.fahuo = function($index) {
                        items[$index].status1 = !items[$index].status1;
                        //                      alert(items[$index].status1)
                    }
                    //下拉筛选
                    $scope.changestutas = function() {
                        var arrtemp = [];
                        if($scope.change == '未发货') {
                            for(var i = 0; i < items.length; i++) {
                                if(!items[i].status1) {
                                    arrtemp.push(items[i])
                                }
                            }
                        } else if($scope.change == '已发货') {
                            for(var i = 0; i < items.length; i++) {
                                if(items[i].status1) {
                                    arrtemp.push(items[i])
                                }
                            }
                        } else {
                            arrtemp = items;
                        }
                        $scope.items = arrtemp;
                    }
                    //查询商品
                    $scope.selgoods = function($event) {
                        var arrtemp = [];
                        var keycode = $event.keyCode;
                        if(keycode == 13) {
                            for(var i = 0; i < items.length; i++) {
                                if(items[i].goods.indexOf($scope.ng_goods) != -1) {
                                    arrtemp.push(items[i])
                                }
                            }
                            $scope.items = arrtemp;
                        }
                    }
                    //查询手机号
                    $scope.seltel = function($event) {
                        var arrtemp = [];
                        var keycode = $event.keyCode;
                        if(keycode == 13) {
                            for(var i = 0; i < items.length; i++) {
                                if(items[i].tel.indexOf($scope.ng_tel) != -1) {
                                    arrtemp.push(items[i])
                                }
                            }
                            $scope.items = arrtemp;
                        }
                    }
                    //全选checkbox
                    $scope.all = function() {
                        for(var i = 0; i < items.length; i++) {
                            items[i].isChecked = !items[i].isChecked;
                            $(".checked1")[i].checked = $scope.all2;
                            //                          alert($(".checked1")[i].checked)
                        }
                    }
                    //批量删除
                    $scope.alldel = function() {
                        for(var i = items.length - 1; i >= 0; i--) {
                            var g = items[i];
                            var s = g.status1;
                            var c = g.isChecked;
                            console.log(s + "---" + c)
                            if(s && c) {
                                items.splice(i, 1);
                            }
                        }
                        $scope.items = items;
                    }
                    //点击checkbox修改
                    $scope.aclick = function($index) {
                        items[$index].isChecked = !items[$index].isChecked;
                    }

                    /*排序显示的数组*/
                    //id排序
                    var idflag = true;
                    $scope.order_id = function() {
                        if(idflag) {
                            $scope.items.sort(function(a, b) {
                                return a.id - b.id;
                            })
                        } else {
                            $scope.items.sort(function(a, b) {
                                return b.id - a.id;
                            })
                        }
                        idflag = !idflag;
                    }
                    //price排序
                    var priceflag = true;
                    $scope.order_price = function() {
                        if(priceflag) {
                            $scope.items.sort(function(a, b) {
                                return a.price - b.price;
                            })
                        } else {
                            $scope.items.sort(function(a, b) {
                                return b.price - a.price;
                            })
                        }
                        priceflag = !priceflag;
                    }
                    //time排序
                    var timeflag = true;
                    $scope.order_time = function() {
                        if(timeflag) {
                            $scope.items.sort(function(a, b) {
                                return a.downtime - b.downtime;
                            })
                        } else {
                            $scope.items.sort(function(a, b) {
                                return b.downtime - a.downtime;
                            })
                        }
                        timeflag = !timeflag;
                    }
                    //新增保存数据
                    $scope.savedata = function() {
                        var fiel_good = $scope.fiel_good;
                        var fiel_name = $scope.fiel_name;
                        var fiel_tel = $scope.fiel_tel;
                        var fiel_price = $scope.fiel_price;
                        var fiel_city = $scope.fiel_city;
                        if(fiel_good == null || fiel_good == "") {
                            $("#fiel_good").css("border", "1px solid red")
                        } else {
                            $("#fiel_good").css("border", "1px solid")
                        }
                        if(fiel_name == null || fiel_name == "") {
                            $("#fiel_name").css("border", "1px solid red")
                        } else {
                            $("#fiel_name").css("border", "1px solid")
                        }
                        if(fiel_tel == null || fiel_tel == "") {
                            $("#fiel_tel").css("border", "1px solid red")
                        } else {
                            $("#fiel_tel").css("border", "1px solid")
                        }
                        if(fiel_price == null || fiel_price == "") {
                            $("#fiel_price").css("border", "1px solid red")
                        } else {
                            $("#fiel_price").css("border", "1px solid")
                        }

                        if(fiel_good != null && fiel_good != "" && fiel_name != null && fiel_name != "" && fiel_tel != null && fiel_tel != "" && fiel_price != null && fiel_price != "" && fiel_city != null && fiel_city != "") {
                            items.push({
                                id: parseInt(Math.random() * (9999 - 1000 + 1) + 1000),
                                goods: fiel_good,
                                name: fiel_name,
                                tel: fiel_tel,
                                price: fiel_price,
                                city: fiel_city,
                                downtime: new Date().getTime(),
                                isChecked: false,
                                status1: false
                            })
                        }
                        /*else {
                            alert("订单信息所有项必填")
                        }*/
                        $scope.items = items;
                    }
                })
                .filter("mFilter", function() {
                    return function(input) {
                        if(input) {
                            return '已发货'
                        } else {
                            return '未发货'
                        }
                    }
                })
        </script>
    </body>

</html>
Future_Master_L
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS例子_angularjs_
10-02
AngularJS:是一个JS结构化框架，主机不再是DOM，而是页面中动态的数据。1、双向数据绑定。2、声明式依赖注入。3、解耦应用逻辑，数据模型和视图。4、完善的页面指令。5、定制表单验证。6、Ajax封装。用途：构建单...
MySQL----商品表及商品分类表例子
weixin_30832983的博客
07-15 1万+
1.建库 2.建表 新建一个查询，粘贴下列代码，选中执行 #商品分类表 CREATE TABLE category( cid INT PRIMARY KEY, cname VARCHAR(50) ); #商品表 CREATE TABLE products( pid INT PRIMARY KEY, pname VARCHAR(50), ...
html+css 实现简单的列表
qq_38836118的博客
12-05 3804
实现效果 结构 128.00 0 苏州石公山、明月湾、古樟园一日自驾游 南京-->苏州 出发时间： 2017-12-02 共 1 天 踏青旅游
【数据库】商品信息表的设计
热门推荐
孙金旭的博客
12-04 1万+
　　假设你是一家百货公司电脑部的开发人员，某天老板要求你为公司开发一套网上电子商务平台，该百货公司有数千种商品出售，不过目前仅打算先在网上销售数十种方便运输的商品，当然，以后可能会陆续在该电子商务平台上增加新的商品出售。现在开始进行该平台数据库的商品信息表的设计。每种出售的商品都会有相同的属性，如商品编号，商品名称，商品所属类别，相关信息，供货厂商，内含件数，库存，进货价，销售价，优惠价。你很快就...
商品信息管理系统（Python）完整版
李威威wiwi的博客
12-12 8409
商品基本信息管理和商品销量统计。 基本信息管理模块的主要功能有商品基本信息的添加、删除、修改、显示和数据的导入导出 商品销量统计管理模块的主要功能有统计商品的最高销量、最低销量和平均销量。
商品信息管理
m0_72631343的博客
07-10 297
商品信息管理平台
订单添加 批量删除 搜索 排序 时间排序 物流状态
Zyy_921的博客
12-20 555
.kuan {                 width: 100px;                 height: 20px;                 border-top-left-radius: 5em;                 border-top-right-radius: 5em;                 border-bottom-right-
简单的商品信息管理系统(Java 和sql server数据库)源码
weixin_45114101的博客
05-28 1万+
简单的商品信息管理系统(Java 和sql server数据库)源码
C语言程序设计--商品信息管理系统
qq_63964231的博客
06-29 9175
1.1课程设计内容商场商品信息管理系统1.2系统功能需求分析1、问题定义创建一个商品信息管理系统。假设系统中每件商品记录只包括编码、价格、商品名称等信息。程序的运行效果如下图所示，选择任意菜单后，实现相应功能。 在问题定义阶段要考虑题目的可行性和需求分析，接下来进入开发阶段，完成系统设计和系统实现的任务。2.1总体设计采用模块化的程序设计方法，即将较大的任务按照一定的原则分为一个个较小的任务，然后分别设计各个小任务。需要注意的是划分出来的模块应该相对独立但又相关，且容易理解。可以用模块化层次结构图（即模块图
autoit3 信息管理例子
09-23
autoit3 信息管理例子
简易的商品信息管理系统
01-25
用顺序表编程实现一个简易的商品管理系统，功能包括添加记录、遍历、查询、删除、修改、排序，并保存至文件中。
javascript 网上订单页面
10-14
青鸟 javascript 04章 课后作业5 制作网上订单页面
Qt商品信息管理系统
04-20
用Qt做得商品信息管理系统，相信大家会喜欢的，欢迎下载~
商品信息管理系统
09-03
用C语言编写的一个多菜单的商品信息管理软件
订单管理简单例子
02-22
订单管理简单例子
基于C#和Mysql的学生信息管理系统例子
08-10
基于C#和Mysql的学生信息管理系统，一个简单的例子，运行.sln文件即可。
简单java web学生信息管理系统
07-30
本人是新手，也刚开始java web的学习，就在网上找了个例子练手，是一个简单的jsp+servler的学生管理系统。网址：http://www.javazhijia.com/ym/web/193.html导入到eclipse有点报错，我自己做了一点修改，将oracle...
1.21 实例：统计商品信息
you can you up up up的博客
09-28 516
在一个货架上有 5 件商品，编写程序，在输入商品价格之后输出最高价格、总价格和平均价格。 首先要创建一个包含 5 个空元素的价格数组，然后使用 for 循环使用户从控制台录入商品的价格，并将价格保存至数组中，再使用一个 for 循环来遍历该数组，求出最高价格和总价格。最后用总价格除以商品数量算出平均价格。 public static void main(String[] args) { // 声明数组 int[] prices = new int[5]; int maxPrice =
angularjs 卡片例子
最新发布
05-18
以下是一个简单的 AngularJS 卡片例子： HTML 代码： ```html <h3>{{card.title}} <p>{{card.description}} ``` AngularJS 代码： ```javascript var app = angular.module('myApp', []); app....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值