Angular Js 全购物车代码_angular.js购物车代码-CSDN博客

本文介绍了一个使用AngularJS实现的订单管理系统案例，系统包括了商品信息的增删改查、批量操作、状态更改等功能，并实现了简单的前后端交互。

	<!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.min.js" ></script>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<script>
	var app=angular.module("myApp",[]);
	app.controller("myCtrl",function($scope,$http){
	$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").success(function(aa){
	$scope.dates=aa;
	})
	//全选
	$scope.qx=function(){
	for (var i = 0; i < $scope.dates.length; i++) {
	$scope.dates[i].c=$scope.ck;
	}
	}
	//删除
	$scope.scbh=function(index){
	if ($scope.dates[index].state=='已发货') {
	$scope.dates.splice(index,1);
	index--;
	} else{
	alert("未发货的商品不能删除");
	}
	}
	//修改
	$scope.xg=function(d){
	var xgwc=prompt("修改的内容",d.price);
	d.price=xgwc;
	}
	//商品总价
	$scope.sumhe=function(){
	sun=0;
	for (var i = 0; i < $scope.dates.length; i++) {
	sun=sun+($scope.o*$scope.dates[i].price);
	}
	return sun;
	}
	//添加
	$scope.xzbc=function(){
	var sj=new Date();
	if ($scope.idd==null\|$scope.spm==null\|$scope.yhm==null\|$scope.dh==null\|$scope.jg==null\|$scope.ss==null) {
	$scope.tis=true;
	}else{
	if ($scope.idd==""\|$scope.spm==""\|$scope.yhm==""\|$scope.dh==""\|$scope.jg==""\|$scope.ss=="") {
	$scope.tis=true;
	}else{
	var stu={id:$scope.idd,gname:$scope.spm,uname:$scope.yhm,tel:$scope.dh,price:$scope.jg,city:$scope.ss,regdate:sj,state:'未发货'}
	$scope.dates.push(stu);
	$scope.flag=false;
	$scope.tis=false;
	}
	}
	}
	//批量删除
	$scope.plsc=function(){
	for (var i = 0; i < $scope.dates.length; i++) {
	if ($scope.dates[i].c) {
	if ($scope.dates[i].state=='已发货') {
	$scope.dates.splice(i,1);
	i--;
	} else{
	alert("未发货的商品不能删除");
	}
	}
	}
	}
	})
	</script>
	<style>
	tr:nth-child(2n+1){
	background: thistle;
	}
	tr:nth-child(2n){
	background: cyan;
	}
	</style>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl" ng-init="o=1">
	<button ng-click="flag=true">新增订单</button>
	<button ng-click="plsc()">批量删除</button>
	<input ng-model="sname" placeholder="请输入商品名" />
	<input ng-model="stel" placeholder="请输入手机号" />
	<select ng-model="sss">
	<option value="">请选择状态</option>
	<option>已发货</option>
	<option>未发货</option>
	</select>
	<table border="1">
	<tr>
	<td><input type="checkbox" ng-model="ck" ng-click="qx()" /></td>
	<td>id<button ng-click="px='id';f=!f">排序</button></td>
	<td>商品名</td>
	<td>用户名</td>
	<td>电话</td>
	<td>价格<button ng-click="px='price';f=!f">排序</button></td>
	<td>城市</td>
	<td>下单时间<button ng-click="px='regdate';f=!f">排序</button></td>
	<td>状态</td>
	<td>操作</td>
	<td>数量</td>
	<td>小计</td>
	</tr>
	<tr ng-repeat="d in dates\|orderBy:px:f\|filter:{state:sss,gname:sname,tel:stel}">
	<td><input type="checkbox" ng-model="d.c" /></td>
	<td>{{d.id}}</td>
	<td>{{d.gname}}</td>
	<td>{{d.uname}}</td>
	<td>{{d.tel}}</td>
	<td>{{d.price\|currency:'￥：'}}</td>
	<td>{{d.city}}</td>
	<td>{{d.regdate\|date:'MM-dd hh:mm:ss'}}</td>
	<td>
	<span style="background: tomato;" ng-show="d.state=='未发货'"><a href="#" ng-click="d.state='已发货'">未发货</a></span>
	<span style="background: yellowgreen;" ng-show="d.state=='已发货'">已发货</span>
	</td>
	<td>
	<button ng-click="xg(d)">修改</button>
	<button ng-click="scbh($index)">删除</button>
	</td>
	<td><button ng-click="o=o+1">+</button>{{o}}<button ng-click="o=o-1">-</button></td>
	<td>{{d.price*o}}</td>
	</tr>
	</table>
	<button>商品总价{{sumhe()}}</button>
	<form ng-show="flag">
	<label>
	id<input ng-model="idd" /><span ng-show="tis">不能为空</span>
	</label><br />
	<label>
	商品名<input ng-model="spm" /><span ng-show="tis">不能为空</span>
	</label><br />
	<label>
	用户名<input ng-model="yhm" /><span ng-show="tis">不能为空</span>
	</label><br />
	<label>
	电话<input ng-model="dh" /><span ng-show="tis">不能为空</span>
	</label><br />
	<label>
	价格<input ng-model="jg" /><span ng-show="tis">不能为空</span>
	</label><br />
	<label>
	城市<select ng-model="ss">
	<option value="">请选择城市</option>
	<option>北京</option>
	<option>上海</option>
	<option>郑州</option>
	</select><span ng-show="tis">不能为空</span>
	</label><br />
	<button ng-click="xzbc()">保存</button>
	</form>
	</body>
	</html>