AngularJs购物车添加订单综合
来源：互联网 发布：淘宝助理官方下载免费 编辑：程序博客网 时间：2024/05/17 03:59
<!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> <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>阅读全文
0 0
- AngularJs购物车添加订单综合
- Angularjs购物车订单强化
- angularJS实现购物车订单
- angularjs技术实现购物车加减页面，订单页面
- AngualrJS实现购物车订单功能/添加/排序/过滤
- 购物车/订单
- 购物车和订单
- 购物车+订单
- 购物车之订单
- 购物车订单布局
- 项目需求：将购物车中的商品添加到订单表和订单商品表
- 图书购买系统之本地添加购物车(完善版)--实现生成订单和子订单
- asp.net购物车，订单以及模拟支付宝支付（一）---购物车表及添加购物车流程
- 购物车的综合
- angular购物车增加订单
- 购物车之订单列表
- 商品详情，购物车，订单
- 【AngularJS】购物车实例
- AnngularJs购物车的简单操作
- linux命令学习1
- vector容器基本用法
- AngularJs简单订单操作
- deque容器基本操作
- AngularJs购物车添加订单综合
- P2066 机器分配
- stack容器基本操作
- 购物车angular
- 初学angluarjs订单管理
- JAVA中 子类与父类构造方法的关系 个人理解
- Qt中有中文注释编译错误问题
- [BZOJ1612]奶牛的比赛 传递闭包
- 【正一专栏】《使徒行者2》——难得追完的剧
