<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/angular.min.js" charset="UTF-8" type="text/javascript"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http.get("week3.json").then(function(respones){
$scope.goods = respones.data;
});
$scope.delGoods = function(name){
if(confirm("是否删除此条数据?")){
for(var i = 0 ;i<$scope.goods.length;i++){
if ($scope.goods[i].gname == name) {
$scope.goods.splice(i,1);
break;
}
}
}
}
$scope.addGoods = function(){
var good = {};
good.gid = $scope.gid;
for(var i = 0 ;i<$scope.goods.length;i++){
var ids = $scope.goods[i].gid
if($scope.gid == "" || $scope.gid == null){
alert("不能为空");
return;
}
if(good.gid == ids ){
alert("编号已存在")
return;
}else{
good.gid = $scope.gid;
}
}
if($scope.gname == "" || $scope.gname == null){
alert("姓名不可为空")
return;
}else{
good.gname=$scope.gname;
}
if($scope.gnum == "" || $scope.gnum == null){
alert("数量不可为空")
return;
}else{
good.gnum=$scope.gnum;
}
if($scope.gprice == "" || $scope.gprice == null){
alert("价格不可为空")
return;
}else{
good.gprice=$scope.gprice;
}
if($scope.gxl == "" || $scope.gxl == null){
alert("销量不可为空")
return;
}else{
good.gxl=$scope.gxl;
}
$scope.goods.push(good);
$scope.showAdd = false;
}
$scope.orderKey == "";
$scope.selectKey == "";
$scope.checkAll = function(){
for(var i = 0 ;i<$scope.goods.length;i++){
if($scope.goods[i].ck){
$scope.goods[i].ck = false;
}else{
$scope.goods[i].ck = true;
}
}
}
$scope.delAll= function(){
if(confirm("是否删除数据?")){
for(var i = 0 ;i<$scope.goods.length;i++){
if($scope.goods[i].ck){
$scope.goods.splice(i,1);
i--;
}
}
}
}
$scope.jian = function(gid){
for (var i = 0 ; i< $scope.goods.length; i++) {
if($scope.goods[i].gid == gid){
if($scope.goods[i].gnum > 0){
$scope.goods[i].gnum = $scope.goods[i].gnum-1;
}else{
$scope.goods.splice(i,1);
}
}
}
}
$scope.sum = function(){
var t = 0;
for(var i = 0 ; i< $scope.goods.length; i++){
t = t + $scope.goods[i].gnum;
}
return t;
}
$scope.showTable = true;
$scope.showtable = function(){
$scope.showTable = false;
}
$scope.goumai = function(id,name,num,xl){
for (var i = 0 ; i< $scope.goods.length; i++) {
if($scope.goods[i].gname == name){
$scope.goods[i].gnum = $scope.goods[i].gnum-1;
$scope.goods[i].gxl = $scope.goods[i].gxl+1;
}
}
$scope.jian(id);
}
});
</script>
<style>
.odd{
background-color: gray;
}
.eve{
background-color: white;
}
table{
width: 800px;
}
</style>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="button" value="入库/添加" ng-click="showAdd = ! showAdd" />
排序:
<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="gprice">价格正序</option>
<option value="-gpride">价格倒序</option>
</select>
查询:
<input type="text" placeholder="请输入查询关键字" ng-model="selectKey" />
<input type="button" value="全选" ng-click="checkAll()" />
<input type="button" value="批量删除" ng-click="delAll()" />
<input type="button" value="清空购物车" ng-click="showtable()" />
<div ng-show="showAdd">
商品编号<input type="text" placeholder="请输入商品编号" ng-model="gid" /><br>
商品名称<input type="text" placeholder="请输入商品名称" ng-model="gname" /><br>
商品数量<input type="text" placeholder="请输入商品数量" ng-model="gnum" /><br>
商品价格<input type="text" placeholder="请输入商品价格" ng-model="gprice" /><br>
商品销量<input type="text" placeholder="请输入商品销量" ng-model="gxl" /><br>
<input type="button" value="确认" ng-click="addGoods()" />
</div>
<table border="1" ng-show="showTable">
<tr>
<td>
<input type="checkbox" ng-model="ck" ng-click="checkAll()"/>
</td>
<td>商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品价格</td>
<td>商品总价</td>
<td>商品销量</td>
<td>商品操作</td>
</tr>
<tr ng-repeat="g in goods | orderBy:orderKey | filter:selectKey" class="{{$index%2? 'eve':'odd'}}">
<td>
<input type="checkbox" ng-model="g.ck"/>
</td>
<td>{{g.gid}}</td>
<td>{{g.gname}}</td>
<td>
<input type="button" value="+" ng-click="g.gnum = g.gnum+1" />
<input type="text" value="{{g.gnum}}" style="width: 20px;" />
<input type="button" value="-" ng-click="jian(g.gid)" />
</td>
<td>{{g.gprice}}</td>
<td>{{g.gnum * g.gprice | currency:"￥"}}</td>
<td>{{g.gxl}}</td>
<td>
<input type="button" value="购买" ng-click="goumai(g.gid,g.gname,g.gnum,g.gxl)" />
<input type="button" value="删除" ng-click="delGoods(g.gid)"/></td>
</tr>
</table>
商品总数:{{sum()}}
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/angular.min.js" charset="UTF-8" type="text/javascript"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http.get("week3.json").then(function(respones){
$scope.goods = respones.data;
});
$scope.delGoods = function(name){
if(confirm("是否删除此条数据?")){
for(var i = 0 ;i<$scope.goods.length;i++){
if ($scope.goods[i].gname == name) {
$scope.goods.splice(i,1);
break;
}
}
}
}
$scope.addGoods = function(){
var good = {};
good.gid = $scope.gid;
for(var i = 0 ;i<$scope.goods.length;i++){
var ids = $scope.goods[i].gid
if($scope.gid == "" || $scope.gid == null){
alert("不能为空");
return;
}
if(good.gid == ids ){
alert("编号已存在")
return;
}else{
good.gid = $scope.gid;
}
}
if($scope.gname == "" || $scope.gname == null){
alert("姓名不可为空")
return;
}else{
good.gname=$scope.gname;
}
if($scope.gnum == "" || $scope.gnum == null){
alert("数量不可为空")
return;
}else{
good.gnum=$scope.gnum;
}
if($scope.gprice == "" || $scope.gprice == null){
alert("价格不可为空")
return;
}else{
good.gprice=$scope.gprice;
}
if($scope.gxl == "" || $scope.gxl == null){
alert("销量不可为空")
return;
}else{
good.gxl=$scope.gxl;
}
$scope.goods.push(good);
$scope.showAdd = false;
}
$scope.orderKey == "";
$scope.selectKey == "";
$scope.checkAll = function(){
for(var i = 0 ;i<$scope.goods.length;i++){
if($scope.goods[i].ck){
$scope.goods[i].ck = false;
}else{
$scope.goods[i].ck = true;
}
}
}
$scope.delAll= function(){
if(confirm("是否删除数据?")){
for(var i = 0 ;i<$scope.goods.length;i++){
if($scope.goods[i].ck){
$scope.goods.splice(i,1);
i--;
}
}
}
}
$scope.jian = function(gid){
for (var i = 0 ; i< $scope.goods.length; i++) {
if($scope.goods[i].gid == gid){
if($scope.goods[i].gnum > 0){
$scope.goods[i].gnum = $scope.goods[i].gnum-1;
}else{
$scope.goods.splice(i,1);
}
}
}
}
$scope.sum = function(){
var t = 0;
for(var i = 0 ; i< $scope.goods.length; i++){
t = t + $scope.goods[i].gnum;
}
return t;
}
$scope.showTable = true;
$scope.showtable = function(){
$scope.showTable = false;
}
$scope.goumai = function(id,name,num,xl){
for (var i = 0 ; i< $scope.goods.length; i++) {
if($scope.goods[i].gname == name){
$scope.goods[i].gnum = $scope.goods[i].gnum-1;
$scope.goods[i].gxl = $scope.goods[i].gxl+1;
}
}
$scope.jian(id);
}
});
</script>
<style>
.odd{
background-color: gray;
}
.eve{
background-color: white;
}
table{
width: 800px;
}
</style>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="button" value="入库/添加" ng-click="showAdd = ! showAdd" />
排序:
<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="gprice">价格正序</option>
<option value="-gpride">价格倒序</option>
</select>
查询:
<input type="text" placeholder="请输入查询关键字" ng-model="selectKey" />
<input type="button" value="全选" ng-click="checkAll()" />
<input type="button" value="批量删除" ng-click="delAll()" />
<input type="button" value="清空购物车" ng-click="showtable()" />
<div ng-show="showAdd">
商品编号<input type="text" placeholder="请输入商品编号" ng-model="gid" /><br>
商品名称<input type="text" placeholder="请输入商品名称" ng-model="gname" /><br>
商品数量<input type="text" placeholder="请输入商品数量" ng-model="gnum" /><br>
商品价格<input type="text" placeholder="请输入商品价格" ng-model="gprice" /><br>
商品销量<input type="text" placeholder="请输入商品销量" ng-model="gxl" /><br>
<input type="button" value="确认" ng-click="addGoods()" />
</div>
<table border="1" ng-show="showTable">
<tr>
<td>
<input type="checkbox" ng-model="ck" ng-click="checkAll()"/>
</td>
<td>商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品价格</td>
<td>商品总价</td>
<td>商品销量</td>
<td>商品操作</td>
</tr>
<tr ng-repeat="g in goods | orderBy:orderKey | filter:selectKey" class="{{$index%2? 'eve':'odd'}}">
<td>
<input type="checkbox" ng-model="g.ck"/>
</td>
<td>{{g.gid}}</td>
<td>{{g.gname}}</td>
<td>
<input type="button" value="+" ng-click="g.gnum = g.gnum+1" />
<input type="text" value="{{g.gnum}}" style="width: 20px;" />
<input type="button" value="-" ng-click="jian(g.gid)" />
</td>
<td>{{g.gprice}}</td>
<td>{{g.gnum * g.gprice | currency:"￥"}}</td>
<td>{{g.gxl}}</td>
<td>
<input type="button" value="购买" ng-click="goumai(g.gid,g.gname,g.gnum,g.gxl)" />
<input type="button" value="删除" ng-click="delGoods(g.gid)"/></td>
</tr>
</table>
商品总数:{{sum()}}
</body>
</html>