<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>练习</title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angularjs-route.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="js/index2.css"/>
</head>
<body ng-app="Myapp" ng-controller="Myctrl">
<!--各行变色-->
<style type="text/css">
tr:nth-child(odd) {
background: blanchedalmond;
}
tr:nth-child(even) {
background: palegreen;
}
</style>
<input type="text" placeholder="输入名称插叙" ng-model="ty" />
<select ng-model="val">
<option value="">--请选择--</option>
<option value="gprice">单价正序</option>
<option value="-gprice">单价倒序</option>
<option value="gnum">数量正序</option>
<option value="-gnum">数量倒序</option>
<option value="gcount">小计正序</option>
<option value="-gcount">小计倒序</option>
</select>
<input type="button" name="" id="" value="添加" ng-click="tianjia()" />
<input type="button" name="" id="" value="批量删除" ng-click="pishan(g.gid)" />
<table border="1px">
<tr>
<td><input type="checkbox"></td>
<td>商品编号</td>
<td>商品名称</td>
<td>商品单价</td>
<td>商品数量</td>
<td>商品小计</td>
<td>商品操作</td>
</tr>
<tr ng-repeat="g in goods|filter:ty|orderBy:val">
<td><input type="checkbox" ></td>
<td>{{g.gid}}</td>
<td>{{g.gname}}</td>
<td>{{g.gprice}}</td>
<td><input type="number" value="{{g.gnum}}" ng-model="g.gnum"></td>
<td>{{g.gcount=g.gnum*g.gprice}}</td>
<td>
<input type="button" value="删除" ng-click="del(g.gid)">
<input type="button" value="修改" ng-click="xiugai(g.gid,g.gname,g.gprice,g.gnum)" />
</td>
</tr>
</table>
<input type="button" value="清除购物车" ng-click="all()" />
<div id="div1">
总数量为:{{count()}}<br /> 总计{{sum()}}元
</div>
<form action="" method="post" ng-show="isShow">
商品编号: <input type="text" placeholder="商品编号" ng-model="t_id" />
<span ng-show="id_show">商品编号不能为空</span><br/> 商品名称: <input type="text" placeholder="商品名称" ng-model="t_name" />
<span ng-show="name_show">商品名称不能为空</span><br /> 商品单价: <input type="text" placeholder="商品单价" ng-model="t_price" />
<span ng-show="price_show">商品单价不能为空</span><br /> 商品数量: <input type="text" placeholder="商品数量" ng-model="t_num" />
<span ng-show="num_show">商品数量不能为空</span><br />
<input type="button" value="提交" ng-click="save()" />
</form>
<script type="text/javascript">
var an = angular.module("Myapp", []);
an.controller("Myctrl", function($scope, $http) {
$scope.goods = [];
var t = 0;
$http.get("goods.json").then(function(req) {
$scope.goods = req.data;
})
$scope.count = function() {
var zong = 0;
for(var i = 0; i < $scope.goods.length; i++) {
var num = $scope.goods[i].gnum;
zong = zong + num;
}
return zong;
}
$scope.sum = function() {
var zong = 0
for(var i = 0; i < $scope.goods.length; i++) {
var z = $scope.goods[i].gcount * 1;
zong = zong + z;
}
return zong;
}
$scope.del = function(id) {
if(confirm("确认删除该数据吗?")) {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].gid == id) {
$scope.goods.splice(i, 1);
}
}
}
}
//清空购物差
$scope.all = function() {
$scope.goods = []
}
//添加显示
$scope.tianjia = function() {
$scope.isShow = true;
t = 0;
}
//保存
$scope.save = function() {
//id验证
var id = $scope.t_id;
if(id == "" || id == null) {
$scope.id_show = true;
return;
} else {
$scope.id_show = false;
}
//姓名验证
var name = $scope.t_name;
if(name == "" || name == null) {
$scope.name_show = true;
return;
} else {
$scope.name_show = false;
}
//单价验证
var price = $scope.t_price;
if(price == "" || price == null) {
$scope.price_show = true;
return;
} else {
$scope.price_show = false;
}
//数量验证
var num = $scope.t_num;
if(num == "" || num == null) {
$scope.num_show = true;
return;
} else {
$scope.num_show = false;
}
//添加
var g = {
"gid": id,
"gname": name,
"gnum": num * 1,
"gprice": price * 1,
"gcount": num * price
}
if(t == 0) {
$scope.goods.push(g);
} else {
for(var i = 0; i < $scope.goods.length; i++) {
var good = $scope.goods[i];
if(good.gid == id) {
good.gid = id;
good.gname = name;
good.gprice = price * 1;
good.gnum = num * 1;
good.gcount = good.gnum * good.gprice;
break;
}
}
}
$scope.isShow = false;
}
$scope.xiugai = function(id, name, price, num) {
$scope.isShow = true;
t = 1;
//回显
$scope.t_id = id;
$scope.t_name = name;
$scope.t_price = price;
$scope.t_num = num;
//修改
}
//批量删除
$scope.pishan = function() {
var cbs=$("[type=checkbox]:checked");
for(var i=0;i<cbs.length;i++){
var cb=cbs[i];
var tr=cb.parentNode.parentNode;
var sname=tr.cells[2].innerHTML;
for(var j=0;$scope.goods.length;j++){
var g=$scope.goods[j];
if(sname==g.gname){
$scope.goods.splice(j,1);
break;
}
}
}
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>练习</title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angularjs-route.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="js/index2.css"/>
</head>
<body ng-app="Myapp" ng-controller="Myctrl">
<!--各行变色-->
<style type="text/css">
tr:nth-child(odd) {
background: blanchedalmond;
}
tr:nth-child(even) {
background: palegreen;
}
</style>
<input type="text" placeholder="输入名称插叙" ng-model="ty" />
<select ng-model="val">
<option value="">--请选择--</option>
<option value="gprice">单价正序</option>
<option value="-gprice">单价倒序</option>
<option value="gnum">数量正序</option>
<option value="-gnum">数量倒序</option>
<option value="gcount">小计正序</option>
<option value="-gcount">小计倒序</option>
</select>
<input type="button" name="" id="" value="添加" ng-click="tianjia()" />
<input type="button" name="" id="" value="批量删除" ng-click="pishan(g.gid)" />
<table border="1px">
<tr>
<td><input type="checkbox"></td>
<td>商品编号</td>
<td>商品名称</td>
<td>商品单价</td>
<td>商品数量</td>
<td>商品小计</td>
<td>商品操作</td>
</tr>
<tr ng-repeat="g in goods|filter:ty|orderBy:val">
<td><input type="checkbox" ></td>
<td>{{g.gid}}</td>
<td>{{g.gname}}</td>
<td>{{g.gprice}}</td>
<td><input type="number" value="{{g.gnum}}" ng-model="g.gnum"></td>
<td>{{g.gcount=g.gnum*g.gprice}}</td>
<td>
<input type="button" value="删除" ng-click="del(g.gid)">
<input type="button" value="修改" ng-click="xiugai(g.gid,g.gname,g.gprice,g.gnum)" />
</td>
</tr>
</table>
<input type="button" value="清除购物车" ng-click="all()" />
<div id="div1">
总数量为:{{count()}}<br /> 总计{{sum()}}元
</div>
<form action="" method="post" ng-show="isShow">
商品编号: <input type="text" placeholder="商品编号" ng-model="t_id" />
<span ng-show="id_show">商品编号不能为空</span><br/> 商品名称: <input type="text" placeholder="商品名称" ng-model="t_name" />
<span ng-show="name_show">商品名称不能为空</span><br /> 商品单价: <input type="text" placeholder="商品单价" ng-model="t_price" />
<span ng-show="price_show">商品单价不能为空</span><br /> 商品数量: <input type="text" placeholder="商品数量" ng-model="t_num" />
<span ng-show="num_show">商品数量不能为空</span><br />
<input type="button" value="提交" ng-click="save()" />
</form>
<script type="text/javascript">
var an = angular.module("Myapp", []);
an.controller("Myctrl", function($scope, $http) {
$scope.goods = [];
var t = 0;
$http.get("goods.json").then(function(req) {
$scope.goods = req.data;
})
$scope.count = function() {
var zong = 0;
for(var i = 0; i < $scope.goods.length; i++) {
var num = $scope.goods[i].gnum;
zong = zong + num;
}
return zong;
}
$scope.sum = function() {
var zong = 0
for(var i = 0; i < $scope.goods.length; i++) {
var z = $scope.goods[i].gcount * 1;
zong = zong + z;
}
return zong;
}
$scope.del = function(id) {
if(confirm("确认删除该数据吗?")) {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].gid == id) {
$scope.goods.splice(i, 1);
}
}
}
}
//清空购物差
$scope.all = function() {
$scope.goods = []
}
//添加显示
$scope.tianjia = function() {
$scope.isShow = true;
t = 0;
}
//保存
$scope.save = function() {
//id验证
var id = $scope.t_id;
if(id == "" || id == null) {
$scope.id_show = true;
return;
} else {
$scope.id_show = false;
}
//姓名验证
var name = $scope.t_name;
if(name == "" || name == null) {
$scope.name_show = true;
return;
} else {
$scope.name_show = false;
}
//单价验证
var price = $scope.t_price;
if(price == "" || price == null) {
$scope.price_show = true;
return;
} else {
$scope.price_show = false;
}
//数量验证
var num = $scope.t_num;
if(num == "" || num == null) {
$scope.num_show = true;
return;
} else {
$scope.num_show = false;
}
//添加
var g = {
"gid": id,
"gname": name,
"gnum": num * 1,
"gprice": price * 1,
"gcount": num * price
}
if(t == 0) {
$scope.goods.push(g);
} else {
for(var i = 0; i < $scope.goods.length; i++) {
var good = $scope.goods[i];
if(good.gid == id) {
good.gid = id;
good.gname = name;
good.gprice = price * 1;
good.gnum = num * 1;
good.gcount = good.gnum * good.gprice;
break;
}
}
}
$scope.isShow = false;
}
$scope.xiugai = function(id, name, price, num) {
$scope.isShow = true;
t = 1;
//回显
$scope.t_id = id;
$scope.t_name = name;
$scope.t_price = price;
$scope.t_num = num;
//修改
}
//批量删除
$scope.pishan = function() {
var cbs=$("[type=checkbox]:checked");
for(var i=0;i<cbs.length;i++){
var cb=cbs[i];
var tr=cb.parentNode.parentNode;
var sname=tr.cells[2].innerHTML;
for(var j=0;$scope.goods.length;j++){
var g=$scope.goods[j];
if(sname==g.gname){
$scope.goods.splice(j,1);
break;
}
}
}
}
})
</script>
</body>
</html>