下拉菜单

最新推荐文章于 2023-06-12 14:55:53 发布
最新推荐文章于 2023-06-12 14:55:53 发布
阅读量152 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weifengdada/article/details/78344989
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../AngularJS/angular.js" ></script>
        <script type="text/javascript" src="../AngularJS/angular-route.js" ></script>
        <script>
            var app = angular.module("myApp",['ngRoute']);
            //配置路由
            app.config(["$routeProvider",function($routeProvider){
                $routeProvider
                    .when("/",{})
                    .when("/addOrder",{
                        controller:"addOrderCtrl",
                        templateUrl:"addOrder.html"
                    })
                    .otherwise({redirectTo:"/addOrder"});
            }]);
            app.controller("myCtrl",function($scope,$location){
                //数据源
                $scope.orders = [{
                    id:1,
                    goodName:"iPone4",
                    userName:"张三",
                    num:15555555555555,
                    price:4999.00,
                    city:"北京",
                    time:"08-01 10:00",
                    state:"发货"
                },{
                    id:2,
                    goodName:"小米6",
                    userName:"李四",
                    num:155666666666666,
                    price:2999.00,
                    city:"上海",
                    time:"09-01 10:00",
                    state:"已发货"
                },{
                    id:3,
                    goodName:"华为P9",
                    userName:"王五",
                    num:15577777777777,
                    price:3999.00,
                    city:"天津",
                    time:"10-01 10:00",
                    state:"已收货"
                },{
                    id:4,
                    goodName:"OPPO R11",
                    userName:"赵六",
                    num:155888888888,
                    price:4999.00,
                    city:"重庆",
                    time:"11-11 10:00",
                    state:"发货"    
                }];
                
                //定义跳转方法
                $scope.goToPath = function(){
                    $location.path("/addOrder");
                }
                
                $scope.startTime = "开始月份";
                $scope.endTime = "结束月份";
                //过滤时间
                $scope.filterTime = function(index){
                    //获得开始和结束月份
                    
                    //获取当前订单的时间月份
                    var time = $scope.orders[index].time;
                    var month = parseInt(time.split("-")[0]);
                    
                    if($scope.startTime == "开始月份" || $scope.endTime == "结束月份"){
                        return true;
                    }else{
                        var start = parseInt($scope.startTime);
                        var end = parseInt($scope.endTime);
                        
                        if(month >=start && month<=end ){
                            return true;
                        }else{
                            return false;    
                        }
                    }
                }
                
                //更改状态
                $scope.changeState = function(index){
                    $scope.orders[index].state = "已发货";
                }
                
            });
            //添加订单控制器
            app.controller("addOrderCtrl",function($scope){
                $scope.goodName = "";
                $scope.userName = "";
                $scope.num = "";
                $scope.city = "选择城市";
                
                $scope.li1 = false;
                $scope.li2 = false;
                $scope.li3 = false;
                $scope.li4 = false;
                $scope.li5 = false;
                $scope.li6 = false;
                $scope.li7 = false;
                
                
                $scope.sub = function(){
                    //判断商品名是否为空
                    if($scope.goodName == null || $scope.goodName == ""){
                        $scope.li1 = true;
                    }else{
                        $scope.li1 = false;
                        //判断商品名是否符合格式
                        if($scope.goodName.length <= 6 || $scope.goodName.length >= 20){
                            alert("asf")
                            $scope.li2 = true;
                        }else{
                            $scope.li2 = false;
                        }
                    }
                    //判断用户名是否为空
                    if($scope.userName == null || $scope.userName == ""){
                        $scope.li3 = true;
                    }else{
                        $scope.li3 = false;
                        //判断用户名是否符合格式
                        if($scope.userName.length <= 4 || $scope.userName.length >= 16){
                            $scope.li4 = true;
                        }else{
                            $scope.li4 = false;
                        }
                    }
                    //判断手机号是否为空
                    if($scope.num == null || $scope.num == ""){
                        $scope.li5 = true;
                    }else{
                        $scope.li5 = false;
                        //判断手机号是否符合格式
                        alert($scope.num.length);
                        if($scope.num.length == 11){
                            if(isNaN($scope.num)){
                                $scope.li6 = true;
                            }else{
                                $scope.li6 = false;
                            }
                        }else{
                            $scope.li6 = true;
                        }
                    }
                    //判断手机号是否符合格式
                    if($scope.city == "选择城市"){
                        $scope.li7 = true;
                    }else{
                        $scope.li7 = false;
                    }
                    
                    
                    if(!$scope.li1 && !$scope.li2 && !$scope.li3 && !$scope.li4 && !$scope.li5 && !$scope.li6 && !$scope.li7){
                        //全显示，格式全不正确，才能进来
                        //获得ID
                        var idMax = 0;
                        for(index in $scope.orders){
                            if($scope.orders[index].id>idMax){
                                idMax = $scope.orders[index].id;
                            }
                        }
                        //alert("添加");
                        var date = new Date();
                        var month = date.getMonth()+1;
                        var day = date.getDate();
                        var hours = date.getHours();
                        var minute = date.getMinutes();
                        var myTime = month+"-"+day+" "+hours+":"+minute;
                        var order = {
                            id:idMax+1,
                            goodName:$scope.goodName,
                            userName:$scope.userName,
                            num:$scope.num,
                            price:2999.00,
                            city:$scope.city,
                            time:myTime,
                            state:"发货"
                        };
                        //将订单添加到数据源
                        $scope.orders.push(order);
                    }else{
                        //
                    }
                }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <center>
            <h3>订单页面</h3>
            <input  type="text" placeholder="用户名搜索" size="8" />
            <input  type="text" placeholder="手机号搜索" size="8" />
            <select>
                <option>选择城市</option>
                <option>北京</option>
                <option>上海</option>
                <option>天津</option>
                <option>重庆</option>
            </select>
            <select>
                <option>选择状态</option>
                <option>发货</option>
                <option>已发货</option>
                <option>已收货</option>
            </select>
            <select ng-model="startTime">
                <option>开始月份</option>
                <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
                <option>05</option>
                <option>06</option>
                <option>07</option>
                <option>08</option>
                <option>09</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>-
            <select ng-model="endTime">
                <option>结束月份</option>
                <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
                <option>05</option>
                <option>06</option>
                <option>07</option>
                <option>08</option>
                <option>09</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select><br /><br />
            <button ng-click="goToPath()">新增订单</button>
            <button>批量发货</button><br /><br />
            <table border="1 solid blue" cellpadding="10" cellspacing="0">
                <thead>
                    <tr>
                        <th><input type="checkbox" /> </th>
                        <th>ID　排序</th>
                        <th>商品名</th>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>价格　排序</th>
                        <th>城市</th>
                        <th>下单时间　排序</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="order in orders" ng-if="filterTime($index)">
                        <td><input type="checkbox" /> </td>
                        <td>{{order.id}}</td>
                        <td>{{order.goodName}}</td>
                        <td>{{order.userName}}</td>
                        <td>{{order.num}}</td>
                        <td>{{order.price}}</td>
                        <td>{{order.city}}</td>
                        <td>{{order.time}}</td>
                        <td>
                        <span ng-if="order.state == '发货'"><a ng-click="changeState($index)" href="#">{{order.state}}</a></span>    
                        <span ng-if="order.state == '已发货'">{{order.state}}</span>    
                        <span ng-if="order.state == '已收货'">{{order.state}}</span>    
                        </td>
                    </tr>
                </tbody>
            </table>
        </center>
        
        <!-- 添加定点页面 -->
        <script type="text/ng-template" id="addOrder.html">
            <center>
                <h3>新增订单</h3>
                商品名：<input type="text" ng-model="goodName" placeholder="6-20个字符"/><br /><br />
                用户名：<input type="text" ng-model="userName" placeholder="4-16个字符"/><br /><br />
                手机号：<input type="text" ng-model="num" placeholder="4-16个字符"/><br /><br />
                城市：<select ng-model="city">
                        <option>选择城市</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>天津</option>
                        <option>重庆</option>
                </select><br />
                <ul>
                    <li ng-show="li1">商品不能为空</li>
                    <li ng-show="li2">商品名必须是6-20个字符</li>
                    <li ng-show="li3">用户名不能为空</li>
                    <li ng-show="li4">用户名必须是4-16个字符</li>
                    <li ng-show="li5">手机号不能为空</li>
                    <li ng-show="li6">手机号格式不正确</li>
                    <li ng-show="li7">请选择城市</li>
                </ul>
                <input ng-click="sub()" type="button" value="提交"/><br />
            </center>
        </script>
        
        <div ng-view>
            
        </div>
    </body>
</html>

敲代码也要浪的飞起
关注
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
08-31
在使用Bootstrap构建网页时，下拉菜单是一种常见的交互元素，它允许用户在单个按钮下访问多个选项。然而，有时可能会遇到下拉菜单点击后无法显示的问题，这通常是由于JavaScript库加载顺序错误导致的。本篇文章将...
本文实例讲述了AngularJS+bootstrap实现动态选择商品功能。分享给大家供大家参考，具体如下： 项目中后台一个商品库，新建活动时动态选择所需商品
qq_40770183的博客
10-25 672
var app = angular.module("myApp",['ngRoute']); //配置路由 app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/",{}) .when("/addOrder",{ controller:"addOrderCtrl", template
商城系统_订单动态消息功能逻辑_OctShop
OctShop全栈工程师
05-26 189
一、在订单状态发生改变时，订单系统就会记录订单详细状态信息，根据角色的不同，在商家或买家端显示不同的提示消息。超过时间后，订单系统自动确认收货等，都是会根据订单动态消息进行核对，系统再执行相应的操作行为。订单动态消息包括：商品订单，礼品订单，拼团订单等，记录订单的各个流程状态信息，如：待付款，待发货，待收货，待评价，退款中，退款成功，待消费/自取，待分享等。二、订单动态消息是记录整个商城订单流程走向的重要参考，平台，商家，买家可根据此消息了解每个订单的轨迹，特别是发生异议时，可做为重要的参数证据。
taobao.trades.sold.increment.get( 淘宝店铺订单接口，淘宝店铺订单交易数据接口，淘宝店铺订单解密接口，淘宝店铺订单解密提额接口）代码对接教程
Andyfu2019的博客
08-23 1156
淘宝店铺订单解密提额接口，淘宝店铺订单提额接口，天猫店铺订单解密提额接口，天猫店铺订单提额接口，淘宝店铺订单插旗接口，淘宝店铺订单明文接口，淘宝店铺订单解密接口，淘宝店铺订单列表接口，淘宝店铺订单物流接口，淘宝店铺订单交易接口，淘宝店铺订单备注修改接口，淘宝店铺商品上传接口，淘宝店铺商品发布接口，天猫店铺订单插旗接口，天猫店铺订单明文接口，天猫店铺订单解密接口，天猫店铺订单列表接口，天猫店铺订单物流接口，天猫店铺订单交易接口，天猫店铺订单备注修改接口，天猫店铺商品上传接口，天猫店铺商品发布接口，oauth
抖店订单发货回传的实际开发笔记
奶厂小程的博客
11-18 2129
抖店订单发货回传的实际开发
JAVA程序设计思想——供应商问题
weixin_43895666的博客
03-29 397
踩的雷们&&知识点 对数组中的每一个对象必须分别进行实例化操作 https://blog.csdn.net/lxxiang1/article/details/82320720 对象排序 https://blog.csdn.net/ted_cs/article/details/82713706 https://blog.csdn.net/wangtaocsdn/article/de...
Bootstrap实现下拉菜单效果
09-02
下拉菜单是 Bootstrap 中常用的一个组件，它提供了一种简洁的方式来展示链接列表，通常用于导航栏或者设置菜单中。本文将详细介绍如何使用 Bootstrap 实现下拉菜单效果。 1. **基础结构** 创建一个下拉菜单，你...
vue实现带过渡效果的下拉菜单功能
10-15
在本文中，将详细介绍如何使用Vue.js框架来实现一个带有过渡动画效果的下拉菜单功能。这个功能不仅适用于Web端，还包括对移动端的适配，并且还包含了一些额外的交互效果，比如点击下拉菜单之外的区域隐藏下拉菜单。 ...
电商产品设计：商品推荐系统
热门推荐
Carey
08-16 1万+
在电商网站里进行商品推荐，可以提高整个网站商品销售的有效转化率，增加商品销量。通过用户已经浏览、收藏、购买的记录，更精准的理解用户需求，对用户进行聚类、打标签，推荐用户感兴趣的商品，帮助用户快速找到需要的商品，适时放大需求，售卖更加多样化的商品。甚至在站外推广时，能够做个性化营销。 商品推荐分为常规推荐、个性化推荐。常规推荐是指商家选择一些固定商品放在推荐位，或者基于商品之间的关联性，进行相关的...
AngulaJs订单管理页面
y__jinhao的博客
06-05 2169
上部分 <!DOCTYPE html> <html ng-app="lesson" ng-controller="lesson2" > <head> <meta charset ="UTF-8"> <title>Document</title> </head> <body> <p ng-show="IsLoad
订单系统：从0到1设计思路
09-11 5039
https://baijiahao.baidu.com/s?id=1611220684816408868&wfr=spider&for=pc 概述 本文主要讲述了在传统电商企业中，订单系统应承载的角色，就订单系统所包含的主要功能模块梳理了设计思路，并对订单系统未来的发展做了一些思考。 1. 订单系统在企业中的角色 在搭建企业订单系统之前，需要先梳理企业...
JS中拼接HTML加上if判断
qq_37570710的博客
04-21 2697
两种思路： 1、直接在拼接HTML的时候加上if var objecthtmls = '<ul>'; $.each(objectList, function (i, item) { //拼接每一个选项 objecthtmls += '<input type="radio" style="margin-right: -10px;" id="complaintObject' + ite
电商业务简单下单逻辑参考
最新发布
qq_43401815的博客
06-12 290
订单：orderId，userId，status（未确认，已确认，已取消，无效，退款等），payStatus（未支付，支付中，已支付），shippingStatus（发货状态），address，收货人，商品Id，数量，价格，总价格，运费，订单价格，优惠券Id，　　　优惠券支付金额，已付金额，支付金额，创建时间。用户余额，可能是支付，可能是退款。消息队列消费：ID，groupName，topic，tag，key，body，status（处理中，成功，失败），处理次数（总失败放弃），时间。
订单服务-----功能实现逻辑
我从不打没有准备的仗！
12-07 1299
订单服务-----功能实现逻辑
谷粒商城二十一订单服务分布式事务----RabbitMQ最终一致性
梦想是很难很难的，所以先勇敢一点
04-06 1127
假设我们订单服务是成功的，在调用库存服务的时候，出现了假失败的情况，例如服务器故障、超时等原因，库存锁成功并且库存服务事务提交了之后，一直没有给订单服务返回，远程调用有一个超时机制，远程调用会抛一个类似readTimeout的异常，就会出现一个问题，如果是远程调用的库存服务出异常，首先库存服务自己会回滚，订单服务会在库存服务调用完成之后获取返回的锁库存的结果，得知发生了异常，订单服务也会抛异常，那么订单服务也会回滚。举个例子，订单服务的执行流程是，订单服务的逻辑、远程调用库存服务、远程调用优惠券服务。
添加收货地址
weixin_45156514的博客
05-22 2477
新增收货地址-创建数据表 CREATE TABLE t_address ( aid INT AUTO_INCREMENT COMMENT '收货地址id', uid INT COMMENT '归属的用户id', name VARCHAR(20) COMMENT '收货人姓名', province_name VARCHAR(15) COMMENT '省-名称', province_code CHAR(6) COMMENT '省-行政代号', city_name VARCHAR(15) COMM..
angularjs的添加和非空判断
weixin_39792151的博客
11-22 3388
//点击添加                     $scope.addll = function() {                         $scope.isshow = true;                     }                     //点击保存把数据提交到原始数据                      $scope.id="";
Bootstrap下拉菜单深度解析
"Bootstrap每天必学之下拉菜单，讲解了Bootstrap框架中下拉菜单的基本用法，涉及到LESS和Sass版本的源码文件，以及如何引入必要的JavaScript文件以实现下拉菜单功能。" Bootstrap框架的下拉菜单是网页设计中常用的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值