angular购物车路由

最新推荐文章于 2022-12-07 09:00:00 发布
最新推荐文章于 2022-12-07 09:00:00 发布
阅读量216 收藏
点赞数 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/angular.js" ></script>
		<script type="text/javascript" src="js/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>

葛村野人
关注
使用AngularJS实现一个简单页面
du_peiduo的专栏
03-14 7237
第一个AngularJS程序 你好 ！第一个{{helloTo.title1 +" "+ helloTo.title2}}程序示例（使用对象属性，连接字符串） 我所加的内容：{{helloTo.mycontent}} 加载数组：{{helloToArr[2]}}
本文实例讲述了AngularJS+bootstrap实现动态选择商品功能。分享给大家供大家参考，具体如下： 项目中后台一个商品库，新建活动时动态选择所需商品
qq_40770183的博客
10-25 666
var app = angular.module("myApp",['ngRoute']); //配置路由 app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/",{}) .when("/addOrder",{ controller:"addOrderCtrl", template
angularjs的添加和非空判断
weixin_39792151的博客
11-22 3378
//点击添加                     $scope.addll = function() {                         $scope.isshow = true;                     }                     //点击保存把数据提交到原始数据                      $scope.id="";
angular6 根据路由判断是否显示头部和底部
weixin_42080477的博客
07-29 480
private router: Router, // 不显示底部的页面数组 hideFooterPage: Array<any> = [ '/spot/trade', '/contract/trade', '/bxa' ]; // 不显示头部的页面数组 hideHeaderPage: Array<any> = [ '/bxa' ]; /** * 是否隐藏 底部 o...
AngularJS的添加和区间的判断（过滤器）
SXS120730的博客
10-21 603
molikaoshi.html Title 添加新的球员 姓名： 位置： 年龄： 球队： 添加新的球员 用户信息表 年龄： --请选择-- 18-25 26-35 球员 姓名 位置 年龄 球队 得票数
angular v2.0写的购物车
12-02
在本文中，我们将深入探讨基于Angular v2.0开发的购物车应用，它展示了这个现代JavaScript框架的关键特性和功能。Angular v2.0是Google推出的一款完全重构的前端框架，旨在提供更高效、性能更好的Web应用程序开发...
angular8-购物车-b9qtuu：创建于StackBlitz:high_voltage:
02-14
在本项目"angular8-购物车-b9qtuu"中，我们主要探讨的是使用Angular 8框架构建一个购物车应用的实践。Angular是Google维护的一个开源JavaScript框架，它用于构建高性能、可维护的单页应用（SPA）。TypeScript是这个...
everestcartWeb:珠穆朗玛峰购物车的Angular客户
05-08
其中，`app`子目录通常包含应用的核心结构，如主组件（`app.component.ts`）、路由配置（`app-routing.module.ts`）以及各个功能模块（如商品列表、购物车等）。 2. `assets`目录：存放静态资源，如图片、字体、CSS...
angular学习资料
最新发布
06-20
- **电子商务网站**：涵盖复杂的路由配置、购物车功能、用户认证等。 - **社交网络应用**：实现类似Facebook的功能，如用户动态、消息系统等。 ### Angular学习资源推荐 1. **官方文档**：Angular官方文档是最权威...
Angular2框架入门笔记（二）：路由、服务、HTTP、表单
YorikD 's blog
07-21 355
这篇学习笔记主要整理记录Angular的路由、服务、HTTP与表单的功能。路由可以实现不同页面和结构之间导航跳转的功能，服务与HTTP可以对数据进行管理，表单是应用处理用户输入最常用的结构。
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
08-27
主要介绍了Angular4.x通过路由守卫进行路由重定向，实现根据条件跳转到相应的页面,这个功能在网上商城项目上经常会用到，下面小编给大家带来了解决方法一起看看吧
Angularjs bootstrap table多选，支持单击行选中
12-27
Angularjs bootstrap table多选，支持单击行选中
jQuery仿淘宝商品SKU选择商品及分类选择
11-04
jQuery仿淘宝商品SKU选择商品 jQuery仿淘宝商品发布选择分类代码
AngulaJs订单管理页面
y__jinhao的博客
06-05 2156
上部分 <!DOCTYPE html> <html ng-app="lesson" ng-controller="lesson2" > <head> <meta charset ="UTF-8"> <title>Document</title> </head> <body> <p ng-show="IsLoad
在angular里写jQuery 操作bootstrap-table rows——angular经历
weixin_30544657的博客
12-20 130
onLoadSuccess: function (data) { var _bool = mzServer.Msg.isSelectVal(); if (!angular.isUndefined(_bool)) { ...
abp+angular+bootstrap-table的使用
weixin_30521649的博客
03-05 307
问题 materialize与bootstrap框架样式冲突 问题描述 在abp模板项目中引入bootstrap-table，列设置为checkbox，checkbox无法显示。 使用firefox浏览器调试发现，在abp模板项目的materialize.css文件中，abp模板项目重写了默认的checkbox，重写的样式如下： /* Remove default checkbox ...
订单服务-----功能实现逻辑
我从不打没有准备的仗！
12-07 1248
订单服务-----功能实现逻辑
AngularJs+Bootstrap Table $compile动态生成html
_qwerty的博客
11-28 1554
AngularJs+Bootstrap Table $compile动态生成html关于angular+bootstrap table 使用的一些问题 - ①table中动态添加元素并绑定事件，js事件（eg:’ng-click…’）未被监听 - ②使用jQuery方式绑定事件，造成数据动态绑定响应延时关于ng-click未响应问题，由于事件监听在静态HTML页面生成时已经完成，因此对动态生成的
taobao.trades.sold.increment.get( 淘宝店铺订单接口，淘宝店铺订单交易数据接口，淘宝店铺订单解密接口，淘宝店铺订单解密提额接口）代码对接教程
Andyfu2019的博客
08-23 1115
淘宝店铺订单解密提额接口，淘宝店铺订单提额接口，天猫店铺订单解密提额接口，天猫店铺订单提额接口，淘宝店铺订单插旗接口，淘宝店铺订单明文接口，淘宝店铺订单解密接口，淘宝店铺订单列表接口，淘宝店铺订单物流接口，淘宝店铺订单交易接口，淘宝店铺订单备注修改接口，淘宝店铺商品上传接口，淘宝店铺商品发布接口，天猫店铺订单插旗接口，天猫店铺订单明文接口，天猫店铺订单解密接口，天猫店铺订单列表接口，天猫店铺订单物流接口，天猫店铺订单交易接口，天猫店铺订单备注修改接口，天猫店铺商品上传接口，天猫店铺商品发布接口，oauth
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值