<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.color1{
background-color: red;
}
.color2{
background-color: green;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.Goods = "";
$scope.id = 6;
$http({
method:"get",
url:"Goods.json"
}).then(function success(response){
$scope.Goods = response.data;
},function error(response){
$scope.Goods = "请求失败";
});
// 赋初值
$scope.search = "";
$scope.orderCheck = "";
$scope.checkAll = false;
$scope.showTable = true;
$scope.showAdd = false;
$scope.showUpdate = false;
// 全选 全不选
$scope.checkAllFun = function (){
for (i in $scope.Goods) {
$scope.Goods[i].check = $scope.checkAll;
}
}
// 添加数据
$scope.name = "";
$scope.price = "";
$scope.num = "";
$scope.gdate = "";
$scope.product = "";
$scope.check = false;
$scope.add = function (){
var newGood = {};
newGood.id = $scope.id++;
newGood.name = $scope.name;
newGood.price = $scope.price;
newGood.num = parseInt($scope.num);
newGood.gdate = $scope.gdate;
newGood.product = $scope.product;
$scope.Goods.push(newGood);
$scope.showAdd = false;
$scope.showTable = true;
}
// 删除
$scope.delete = function(id){
if(confirm("确定删除么?")){
for (var i = 0 ; i < $scope.Goods.length; i ++ ) {
if($scope.Goods[i].id == id){
$scope.Goods.splice(i,1);
}
}
alert("删除成功!");
}
if($scope.Goods.length == 0){
$scope.showTable = false;
}
}
// 修改数据
var updateGood = [];
$scope.name = "";
$scope.price = "";
$scope.num = "";
$scope.gdate = "";
$scope.product = "";
$scope.update = function(id){
$scope.showUpdate = true;
for (var i = 0 ; i < $scope.Goods.length; i ++ ) {
if($scope.Goods[i].id == id){
updateGood = $scope.Goods[i];
}
}
// 回显
$scope.updateName = updateGood.name;
$scope.updatePrice = updateGood.price;
$scope.updateNum = updateGood.num;
$scope.updateGdate = updateGood.gdate;
$scope.updateProduct = updateGood.product;
// 修改
$scope.submit = function (){
updateGood.name = $scope.updateName;
updateGood.price = $scope.updatePrice;
updateGood.num = parseInt($scope.updateNum);
updateGood.gdate = $scope.updateGdate;
updateGood.product = $scope.updateProduct;
$scope.showUpdate = false;
}
}
// 批量删除
$(function(){
$scope.batchDelete = function (){
var arr = $(":checkbox:checked");
if(arr.length > 0){
if(confirm("确定删除么?")){
arr.each(function(){
var _id = $(this).prop("title");
for (i in $scope.Goods) {
if($scope.Goods[i].id == _id){
$scope.Goods.splice(i,1);
}
}
});
}
}
else {
alert("请勾选数据!");
}
if($scope.Goods.length == 0){
$scope.showTable = false;
}
}
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
查询:<input type="text" ng-model="search" />
排序:<select ng-model="orderCheck">
<option value="">--请选择--</option>
<option value="id">--编号正序--</option>
<option value="-id">--编号倒叙--</option>
<option value="name">--名称正序--</option>
<option value="-name">--名称正序--</option>
<option value="price">--价格正序--</option>
<option value="-price">--价格倒序--</option>
<option value="num">--数量正序--</option>
<option value="-num">--数量倒序--</option>
<option value="price*num">--小计正序--</option>
<option value="-(price*num)">--小计倒序--</option>
<option value="gdate">--日期正序--</option>
<option value="-gdate">--日期倒叙--</option>
<option value="product">--总部正序--</option>
<option value="-product">--总部倒叙--</option>
</select>
<input type="button" value="入库" ng-click="showAdd = !showAdd" />
<!--添加界面-->
<div ng-show="showAdd">
商品名称:<input type="text" ng-model="name" placeholder="输入商品名称.." /><br />
商品价格:<input type="text" ng-model="price" placeholder="输入商品价格.." /><br />
商品数量:<input type="text" ng-model="num" placeholder="输入商品数量.." /><br />
商品日期:<input type="text" ng-model="gdate" placeholder="输入商品日期.." /><br />
商品总部:<input type="text" ng-model="product" placeholder="输入商品总部.." /><br />
<input type="button" value="添加" ng-click="add()" />
</div>
<table style="width: 50%; text-align: center;" cellspacing="0" cellpadding="0" border="1px" ng-show="showTable">
<tr style="background-color: lightgray;">
<td>
<input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()" />
</td>
<td ng-click="orderCheck = 'id' ">商品编号</td>
<td ng-click="orderCheck = 'name' ">商品名称</td>
<td ng-click="orderCheck = 'price' ">商品价格</td>
<td ng-click="orderCheck = 'num' ">商品数量</td>
<td ng-click="orderCheck = 'price*num' ">商品小计</td>
<td ng-click="orderCheck = 'gdate' ">出厂日期</td>
<td ng-click="orderCheck = 'product' ">商品总部</td>
<td>
<input type="button" value="批量删除" ng-click="batchDelete()" />
</td>
</tr>
<tr ng-repeat="q in Goods | filter:search | orderBy:orderCheck" class="{{$index%2 == 0 ? 'color1' : 'color2' }}">
<td>
<input type="checkbox" ng-model="q.check" title="{{q.id}}" />
</td>
<td>{{q.id}}</td>
<td>{{q.name}}</td>
<td>{{q.price}}</td>
<td>
<input type="number" ng-model="q.num" style="width: 70px" />
</td>
<td>{{q.price*q.num}}</td>
<td>{{q.gdate}}</td>
<td>{{q.product}}</td>
<td>
<input type="button" value="删除" ng-click="delete(q.id)" />
<input type="button" value="修改" ng-click="update(q.id)" />
</td>
</tr>
<tr>
<td colspan="9">
</td>
</tr>
</table>
<!--修改界面-->
<div ng-show="showUpdate">
商品名称:<input type="text" ng-model="updateName" /><br />
商品价格:<input type="text" ng-model="updatePrice" /><br />
商品数量:<input type="text" ng-model="updateNum" /><br />
商品日期:<input type="text" ng-model="updateGdate" /><br />
商品总部:<input type="text" ng-model="updateProduct" /><br />
<input type="button" value="提交" ng-click="submit()" />
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.color1{
background-color: red;
}
.color2{
background-color: green;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.Goods = "";
$scope.id = 6;
$http({
method:"get",
url:"Goods.json"
}).then(function success(response){
$scope.Goods = response.data;
},function error(response){
$scope.Goods = "请求失败";
});
// 赋初值
$scope.search = "";
$scope.orderCheck = "";
$scope.checkAll = false;
$scope.showTable = true;
$scope.showAdd = false;
$scope.showUpdate = false;
// 全选 全不选
$scope.checkAllFun = function (){
for (i in $scope.Goods) {
$scope.Goods[i].check = $scope.checkAll;
}
}
// 添加数据
$scope.name = "";
$scope.price = "";
$scope.num = "";
$scope.gdate = "";
$scope.product = "";
$scope.check = false;
$scope.add = function (){
var newGood = {};
newGood.id = $scope.id++;
newGood.name = $scope.name;
newGood.price = $scope.price;
newGood.num = parseInt($scope.num);
newGood.gdate = $scope.gdate;
newGood.product = $scope.product;
$scope.Goods.push(newGood);
$scope.showAdd = false;
$scope.showTable = true;
}
// 删除
$scope.delete = function(id){
if(confirm("确定删除么?")){
for (var i = 0 ; i < $scope.Goods.length; i ++ ) {
if($scope.Goods[i].id == id){
$scope.Goods.splice(i,1);
}
}
alert("删除成功!");
}
if($scope.Goods.length == 0){
$scope.showTable = false;
}
}
// 修改数据
var updateGood = [];
$scope.name = "";
$scope.price = "";
$scope.num = "";
$scope.gdate = "";
$scope.product = "";
$scope.update = function(id){
$scope.showUpdate = true;
for (var i = 0 ; i < $scope.Goods.length; i ++ ) {
if($scope.Goods[i].id == id){
updateGood = $scope.Goods[i];
}
}
// 回显
$scope.updateName = updateGood.name;
$scope.updatePrice = updateGood.price;
$scope.updateNum = updateGood.num;
$scope.updateGdate = updateGood.gdate;
$scope.updateProduct = updateGood.product;
// 修改
$scope.submit = function (){
updateGood.name = $scope.updateName;
updateGood.price = $scope.updatePrice;
updateGood.num = parseInt($scope.updateNum);
updateGood.gdate = $scope.updateGdate;
updateGood.product = $scope.updateProduct;
$scope.showUpdate = false;
}
}
// 批量删除
$(function(){
$scope.batchDelete = function (){
var arr = $(":checkbox:checked");
if(arr.length > 0){
if(confirm("确定删除么?")){
arr.each(function(){
var _id = $(this).prop("title");
for (i in $scope.Goods) {
if($scope.Goods[i].id == _id){
$scope.Goods.splice(i,1);
}
}
});
}
}
else {
alert("请勾选数据!");
}
if($scope.Goods.length == 0){
$scope.showTable = false;
}
}
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
查询:<input type="text" ng-model="search" />
排序:<select ng-model="orderCheck">
<option value="">--请选择--</option>
<option value="id">--编号正序--</option>
<option value="-id">--编号倒叙--</option>
<option value="name">--名称正序--</option>
<option value="-name">--名称正序--</option>
<option value="price">--价格正序--</option>
<option value="-price">--价格倒序--</option>
<option value="num">--数量正序--</option>
<option value="-num">--数量倒序--</option>
<option value="price*num">--小计正序--</option>
<option value="-(price*num)">--小计倒序--</option>
<option value="gdate">--日期正序--</option>
<option value="-gdate">--日期倒叙--</option>
<option value="product">--总部正序--</option>
<option value="-product">--总部倒叙--</option>
</select>
<input type="button" value="入库" ng-click="showAdd = !showAdd" />
<!--添加界面-->
<div ng-show="showAdd">
商品名称:<input type="text" ng-model="name" placeholder="输入商品名称.." /><br />
商品价格:<input type="text" ng-model="price" placeholder="输入商品价格.." /><br />
商品数量:<input type="text" ng-model="num" placeholder="输入商品数量.." /><br />
商品日期:<input type="text" ng-model="gdate" placeholder="输入商品日期.." /><br />
商品总部:<input type="text" ng-model="product" placeholder="输入商品总部.." /><br />
<input type="button" value="添加" ng-click="add()" />
</div>
<table style="width: 50%; text-align: center;" cellspacing="0" cellpadding="0" border="1px" ng-show="showTable">
<tr style="background-color: lightgray;">
<td>
<input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()" />
</td>
<td ng-click="orderCheck = 'id' ">商品编号</td>
<td ng-click="orderCheck = 'name' ">商品名称</td>
<td ng-click="orderCheck = 'price' ">商品价格</td>
<td ng-click="orderCheck = 'num' ">商品数量</td>
<td ng-click="orderCheck = 'price*num' ">商品小计</td>
<td ng-click="orderCheck = 'gdate' ">出厂日期</td>
<td ng-click="orderCheck = 'product' ">商品总部</td>
<td>
<input type="button" value="批量删除" ng-click="batchDelete()" />
</td>
</tr>
<tr ng-repeat="q in Goods | filter:search | orderBy:orderCheck" class="{{$index%2 == 0 ? 'color1' : 'color2' }}">
<td>
<input type="checkbox" ng-model="q.check" title="{{q.id}}" />
</td>
<td>{{q.id}}</td>
<td>{{q.name}}</td>
<td>{{q.price}}</td>
<td>
<input type="number" ng-model="q.num" style="width: 70px" />
</td>
<td>{{q.price*q.num}}</td>
<td>{{q.gdate}}</td>
<td>{{q.product}}</td>
<td>
<input type="button" value="删除" ng-click="delete(q.id)" />
<input type="button" value="修改" ng-click="update(q.id)" />
</td>
</tr>
<tr>
<td colspan="9">
</td>
</tr>
</table>
<!--修改界面-->
<div ng-show="showUpdate">
商品名称:<input type="text" ng-model="updateName" /><br />
商品价格:<input type="text" ng-model="updatePrice" /><br />
商品数量:<input type="text" ng-model="updateNum" /><br />
商品日期:<input type="text" ng-model="updateGdate" /><br />
商品总部:<input type="text" ng-model="updateProduct" /><br />
<input type="button" value="提交" ng-click="submit()" />
</div>
</center>
</body>
</html>