web联网请求, 展示商品货物之综合练习


包:

jQuery Js的类库   <script src=" http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
angula Js的类库    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
angula-route Js的类库  <script src=" http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
ionic Js的类库
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>

联网请求  (两种方式)

1.

$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
				.success(function(a){
					$scope.persons=a;//接口地址 返回的数据自动参数a
				})
2.

//$http请求网络上的数据 get():请求指定路径的数据
					$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
						.then(function(d) { //d---->网址返回数据
							// $scope.persons ==>视图中遍历的对象
							$scope.persons = d.data; //json串  根据键获取值   对象.键名
						});
出生日期获得

{{getAge(d.birthday)}}
//每行遍历都会调用getAge  传进来出生日期, 在函数
					$scope.getAge = function(bir) {
						var b = new Date(bir).getYear(); //出生的年份
						var nowb = new Date().getYear();
						return nowb - b;
					}

商品货物练习

头部   样式  包

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title>孙晶综合练习</title>
		<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
         <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
	     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script> 
    	 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    	 <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> 
		
		<style>
			table{
				width: 500px;
				text-align: center;
			}
			tr:nth-of-type(odd){
				background-color: rosybrown;
			}
			tr:nth-of-type(even){
				background-color: cornflowerblue;
			}
		</style>
	</head>

内容

<body ng-controller="myCtrl">
		<center>
			<h2>商品库管理系统</h2>
			<input type="text" placeholder="请输入要查询的商品" ng-model="sel" />
			<button ng-click="fx()">反选</button>
			<select ng-model="order">
				<option value="">--排序--</option>
				<option value="snum">数量排序</option>
				<option value="sprice">价格排序</option>
			</select>
			<button ng-click="add()">添加</button>
			<button ng-click="seldel()">批量删除</button>
			<button ng-click="clear()">清空购物车</button>
			
			<table>
				<tr style="background-color: grey;">
					<th>
						<input type="checkbox" ng-model="allcb" ng-click="qx()" />
					</th>
					<th>货物名称</th>
					<th>货物数量</th>
					<th>货物单价</th>
					<th>货物总价</th>
					<th>操作</th>
				</tr>
				<tr ng-repeat="s in ss | filter:{sname:sel} | orderBy:order">
					<td>
						<input type="checkbox" ng-model="s.cb" />
					</td>
					<td>{{s.sname}}</td>
					<td>
						<button ng-click="jian($index)">-</button>
						{{s.snum}}
						<button ng-click="jia($index)">+</button>
					</td>
					<td>{{s.sprice | currency}}</td>
					<td>{{s.snum*s.sprice | currency}}</td>
					<td>
						<button ng-click="del($index)">删除</button>
						<button ng-click="update($index)">修改</button>
					</td>
				</tr>
			</table>
			<font>总数:{{allsnum()}}   总价:{{allsprice()}}</font>
			<div ng-show="addshow">
				货物名称<input type="text" ng-model="addname" placeholder="请输入..." />
				货物数量<input type="number" ng-model="addnum" placeholder="请输入..." />
				货物单价<input type="number" ng-model="addprice" placeholder="请输入..." />
				<button ng-click="addsub()">提交</button>
			</div>
			<div ng-show="upshow">
				货物名称<input type="text" ng-model="upname"/>
				货物数量<input type="number" ng-model="upnum"/>
				货物单价<input type="number" ng-model="upprice"/>
				<button ng-click="upsub()">提交</button>
			</div>
		</center>
	</body>

功能   逻辑

---------------------------------------------------------批量删除------------------------------------------------------------------------------------

<script>
		var myApp = angular.module("myApp",[]);
		myApp.controller("myCtrl",function($scope){
			$scope.allsnum=0;
			$scope.addshow=false;
			//批量删除
			$scope.seldel = function(){
				var arr=[];
				for (var x=0;x<$scope.ss.length;x++) {
					if($scope.ss[x].cb){
						arr.push($scope.ss[x].sname);
					}
				}
				//判断是否有选中的cb
				if (arr.length<=0) {
					alert("至少选中一条");
				}else{
					for (var q =0;q<arr.length;q++) {
						for (var e =0;e<$scope.ss.length;e++) {
							if (arr[q]==$scope.ss[e].sname) {
								$scope.ss.splice(e,1);
							}
						}
					}
				}
			}
----------------------------------------------------------------添加--------------------------------------------------------

//添加显示
			$scope.add = function(i){
				$scope.addshow=true;
			}
			//添加提交
			$scope.addsub = function(){
				if(confirm("确认添加吗")){
					$scope.ss.push(
						{sname:$scope.addname,snum:$scope.addnum,sprice:$scope.addprice}
					);
					$scope.addshow=false;
				}
			}
-----------------------------------------------------修改-----------------------------------------------------------------------------

//修改显示
			var xg;
			$scope.update = function(i){
				xg=i;
				$scope.upshow=true;
				$scope.upname=$scope.ss[xg].sname;
				$scope.upnum = $scope.ss[xg].snum;
				$scope.upprice = $scope.ss[xg].sprice;
			}
			//修改提交
			$scope.upsub = function(){
				if(confirm("确认修改了吗")){
					$scope.ss[xg].sname=$scope.upname;
					$scope.ss[xg].snum=$scope.upnum;
					$scope.ss[xg].sprice=$scope.upprice;
					$scope.upshow=false;
				}
			}
------------------------------------------------全选   反选---------------------------------------------------------------------

//反选
			$scope.fx = function(){
				for (var x=0;x<$scope.ss.length;x++) {
					if($scope.ss[x].cb){
						$scope.ss[x].cb=false;
					}else{
						$scope.ss[x].cb=true;
					}
				}
			}
			//  全选
			$scope.qx = function(){
				if ($scope.allcb) {
					//选中
					for (var x=0;x<$scope.ss.length;x++) {
						$scope.ss[x].cb=true;
					}
				} else{
					//未选中
					for (var x=0;x<$scope.ss.length;x++) {
						$scope.ss[x].cb=false;
					}
				}
			}
--------------------------------------------------        一些   小功能  --------------------------------------------------------------

//删除单个商品
			$scope.del = function(i){
				$scope.ss.splice(i,1);
			}
			//数量--
			$scope.jian = function(i){
				$scope.ss[i].snum--;
			}
			//数量++
			$scope.jia = function(i){
				$scope.ss[i].snum++;
			}
			//  总数 
			$scope.allsnum = function(){
				var all=0;
				for (var x=0;x<$scope.ss.length;x++) {
					all+=$scope.ss[x].snum;
				}
				return all;
			}
			//   总价
			$scope.allsprice = function(){
				var all2=0;
				for (var x=0;x<$scope.ss.length;x++) {
					all2+=$scope.ss[x].snum*$scope.ss[x].sprice;
				}
				return all2;
			}
			//清空购物车
			$scope.clear = function(){
				$scope.ss=[];
			}
---------------------------------------------------------基础 遍历---------------------------------------------------------------------------------

//  遍历
			$scope.ss=[
				{sname:"谷粒多红豆奶",snum:25,sprice:4},
				{sname:"葡萄果冻",snum:2,sprice:5},
				{sname:"红枣酸奶",snum:6,sprice:18},
				{sname:"馍干",snum:3,sprice:1}
			];

#################################################  完整的一遍############################################

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title>孙晶综合练习</title>
		<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
         <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
	     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script> 
    	 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    	 <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> 
		
		<style>
			table{
				width: 500px;
				text-align: center;
			}
			tr:nth-of-type(odd){
				background-color: rosybrown;
			}
			tr:nth-of-type(even){
				background-color: cornflowerblue;
			}
		</style>
	</head>
	<body ng-controller="myCtrl">
		<center>
			<h2>商品库管理系统</h2>
			<input type="text" placeholder="请输入要查询的商品" ng-model="sel" />
			<button ng-click="fx()">反选</button>
			<select ng-model="order">
				<option value="">--排序--</option>
				<option value="snum">数量排序</option>
				<option value="sprice">价格排序</option>
			</select>
			<button ng-click="add()">添加</button>
			<button ng-click="seldel()">批量删除</button>
			<button ng-click="clear()">清空购物车</button>
			
			<table>
				<tr style="background-color: grey;">
					<th>
						<input type="checkbox" ng-model="allcb" ng-click="qx()" />
					</th>
					<th>货物名称</th>
					<th>货物数量</th>
					<th>货物单价</th>
					<th>货物总价</th>
					<th>操作</th>
				</tr>
				<tr ng-repeat="s in ss | filter:{sname:sel} | orderBy:order">
					<td>
						<input type="checkbox" ng-model="s.cb" />
					</td>
					<td>{{s.sname}}</td>
					<td>
						<button ng-click="jian($index)">-</button>
						{{s.snum}}
						<button ng-click="jia($index)">+</button>
					</td>
					<td>{{s.sprice | currency}}</td>
					<td>{{s.snum*s.sprice | currency}}</td>
					<td>
						<button ng-click="del($index)">删除</button>
						<button ng-click="update($index)">修改</button>
					</td>
				</tr>
			</table>
			<font>总数:{{allsnum()}}   总价:{{allsprice()}}</font>
			<div ng-show="addshow">
				货物名称<input type="text" ng-model="addname" placeholder="请输入..." />
				货物数量<input type="number" ng-model="addnum" placeholder="请输入..." />
				货物单价<input type="number" ng-model="addprice" placeholder="请输入..." />
				<button ng-click="addsub()">提交</button>
			</div>
			<div ng-show="upshow">
				货物名称<input type="text" ng-model="upname"/>
				货物数量<input type="number" ng-model="upnum"/>
				货物单价<input type="number" ng-model="upprice"/>
				<button ng-click="upsub()">提交</button>
			</div>
		</center>
	</body>
	<script>
		var myApp = angular.module("myApp",[]);
		myApp.controller("myCtrl",function($scope){
			$scope.allsnum=0;
			$scope.addshow=false;
			//批量删除
			$scope.seldel = function(){
				var arr=[];
				for (var x=0;x<$scope.ss.length;x++) {
					if($scope.ss[x].cb){
						arr.push($scope.ss[x].sname);
					}
				}
				//判断是否有选中的cb
				if (arr.length<=0) {
					alert("至少选中一条");
				}else{
					for (var q =0;q<arr.length;q++) {
						for (var e =0;e<$scope.ss.length;e++) {
							if (arr[q]==$scope.ss[e].sname) {
								$scope.ss.splice(e,1);
							}
						}
					}
				}
			}
			//添加显示
			$scope.add = function(i){
				$scope.addshow=true;
			}
			//添加提交
			$scope.addsub = function(){
				if(confirm("确认添加吗")){
					$scope.ss.push(
						{sname:$scope.addname,snum:$scope.addnum,sprice:$scope.addprice}
					);
					$scope.addshow=false;
				}
			}
			//修改显示
			var xg;
			$scope.update = function(i){
				xg=i;
				$scope.upshow=true;
				$scope.upname=$scope.ss[xg].sname;
				$scope.upnum = $scope.ss[xg].snum;
				$scope.upprice = $scope.ss[xg].sprice;
			}
			//修改提交
			$scope.upsub = function(){
				if(confirm("确认修改了吗")){
					$scope.ss[xg].sname=$scope.upname;
					$scope.ss[xg].snum=$scope.upnum;
					$scope.ss[xg].sprice=$scope.upprice;
					$scope.upshow=false;
				}
			}
			//反选
			$scope.fx = function(){
				for (var x=0;x<$scope.ss.length;x++) {
					if($scope.ss[x].cb){
						$scope.ss[x].cb=false;
					}else{
						$scope.ss[x].cb=true;
					}
				}
			}
			//  全选
			$scope.qx = function(){
				if ($scope.allcb) {
					//选中
					for (var x=0;x<$scope.ss.length;x++) {
						$scope.ss[x].cb=true;
					}
				} else{
					//未选中
					for (var x=0;x<$scope.ss.length;x++) {
						$scope.ss[x].cb=false;
					}
				}
			}
			//删除单个商品
			$scope.del = function(i){
				$scope.ss.splice(i,1);
			}
			//数量--
			$scope.jian = function(i){
				$scope.ss[i].snum--;
			}
			//数量++
			$scope.jia = function(i){
				$scope.ss[i].snum++;
			}
			//  总数 
			$scope.allsnum = function(){
				var all=0;
				for (var x=0;x<$scope.ss.length;x++) {
					all+=$scope.ss[x].snum;
				}
				return all;
			}
			//   总价
			$scope.allsprice = function(){
				var all2=0;
				for (var x=0;x<$scope.ss.length;x++) {
					all2+=$scope.ss[x].snum*$scope.ss[x].sprice;
				}
				return all2;
			}
			//清空购物车
			$scope.clear = function(){
				$scope.ss=[];
			}
			//  遍历
			$scope.ss=[
				{sname:"谷粒多红豆奶",snum:25,sprice:4},
				{sname:"葡萄果冻",snum:2,sprice:5},
				{sname:"红枣酸奶",snum:6,sprice:18},
				{sname:"馍干",snum:3,sprice:1}
			];
		});
	</script>
</html>





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值