<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>练习</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style type="text/css">
h1 {
text-align: center;
}
#cha {
border-radius: 50px;
}
#px {
margin-left: 400px;
width: 150px;
height: 26px;
}
#add {
margin-left: 20px;
background: #67B168;
}
table {
margin-top: 20px;
width: 950px;
}
#ruku {
margin-top: 50px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1>商品库存管理系统</h1>
<div id="tou">
<input type="text" id="cha" placeholder="输入关键字搜索" ng-model="test" />
<select ng-model="px" ng-options="x for x in names" ng-init="px=names[0]" ng-change="change()" id="px"></select>
<input type="button" id="add" value="入库" ng-click="add()" />
<input type="button" id="delAll" value="批量删除" ng-click="delAll()" />
</div>
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr style="background: #9D9D9D;">
<td><input type="checkbox" ng-click="all()" /></td>
<td>货物名称</td>
<td>货物数量</td>
<td>货物产地</td>
<td>货物单价</td>
<td>货物入库时间</td>
<td>操作</td>
</tr>
<tr ng-repeat="a in goods | filter:test | orderBy:'country'">
<td><input type="checkbox" id="zcb" /></td>
<td>{{a.name}}</td>
<td>{{a.count}}</td>
<td>{{a.addr}}</td>
<td>{{a.price|currency:"¥:"}}</td>
<td>{{a.data1|date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td><a href="#" ng-click="del($index)">删除</a></td>
</tr>
</table>
<div id="ruku" ng-show="shows">
货物名称:<input type="text" id="name" ng-model="name" /><br /> 货物数量:
<input type="text" id="count" ng-model="count" /><br /> 货物产地:
<input type="text" id="addr" ng-model="addr" /><br /> 货物单价:
<input type="text" id="price" ng-model="price" /><br /> 货物入库日期:
<input type="text" id="data" ng-model="data1" /><br />
<input type="button" id="bc" value="保存" ng-click="bc()" />
</div>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {
$scope.shows = false;
$scope.names = ["按照库存数量正序排序", "按照库存数量倒序排序", "按照入库时间正序排序", "按照入库时间倒序排序"];
$scope.goods = [{
"name": "云南白药",
"count": 100,
"addr": "云南",
"price": 19.9,
"data1": "2017-11-20 11:31:32"
}, {
"name": "999感冒灵",
"count": 30,
"addr": "北京",
"price": 12.9,
"data1": "2017-11-19 11:31:32"
}, {
"name": "感康",
"count": 20,
"addr": "河北",
"price": 9.9,
"data1": "2017-11-20 12:31:32"
}];
$scope.add = function() {
$scope.shows = true;
}
$scope.bc = function() {
$scope.goods.push({
name: $scope.name,
count: $scope.count,
addr: $scope.addr,
price: $scope.price,
data1: $scope.data1
});
$scope.shows = false;
}
$scope.del = function(index) {
if (confirm("确认是否删除?")) {
$scope.goods.splice(index, 1);
}
}
$scope.change = function() {
var xx = $scope.px;
if (xx == "按照库存数量正序排序") {
$scope.goods.sort(function(a, b) {
if (a.count > b.count) {
return 1;
} else if (a.count < b.count) {
return -1;
}
return 0;
});
} else if (xx == "按照库存数量倒序排序") {
$scope.goods.sort(function(a, b) {
if (a.count > b.count) {
return -1;
} else if (a.count < b.count) {
return 1;
}
return 0;
});
}
}
var flag = false;
$scope.all = function() {
var cbs = $("input[type=checkbox]");
if (flag == false) {
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = true;
}
flag = true;
} else {
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = false;
}
flag = false;
}
}
$scope.delAll = function() {
if (confirm("确认删除吗?")) {
var cbs = $("input[type=checkbox][id=zcb]:checked");
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
var tr = cb.parentNode.parentNode;
tr.remove();
}
}
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>练习</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style type="text/css">
h1 {
text-align: center;
}
#cha {
border-radius: 50px;
}
#px {
margin-left: 400px;
width: 150px;
height: 26px;
}
#add {
margin-left: 20px;
background: #67B168;
}
table {
margin-top: 20px;
width: 950px;
}
#ruku {
margin-top: 50px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1>商品库存管理系统</h1>
<div id="tou">
<input type="text" id="cha" placeholder="输入关键字搜索" ng-model="test" />
<select ng-model="px" ng-options="x for x in names" ng-init="px=names[0]" ng-change="change()" id="px"></select>
<input type="button" id="add" value="入库" ng-click="add()" />
<input type="button" id="delAll" value="批量删除" ng-click="delAll()" />
</div>
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr style="background: #9D9D9D;">
<td><input type="checkbox" ng-click="all()" /></td>
<td>货物名称</td>
<td>货物数量</td>
<td>货物产地</td>
<td>货物单价</td>
<td>货物入库时间</td>
<td>操作</td>
</tr>
<tr ng-repeat="a in goods | filter:test | orderBy:'country'">
<td><input type="checkbox" id="zcb" /></td>
<td>{{a.name}}</td>
<td>{{a.count}}</td>
<td>{{a.addr}}</td>
<td>{{a.price|currency:"¥:"}}</td>
<td>{{a.data1|date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td><a href="#" ng-click="del($index)">删除</a></td>
</tr>
</table>
<div id="ruku" ng-show="shows">
货物名称:<input type="text" id="name" ng-model="name" /><br /> 货物数量:
<input type="text" id="count" ng-model="count" /><br /> 货物产地:
<input type="text" id="addr" ng-model="addr" /><br /> 货物单价:
<input type="text" id="price" ng-model="price" /><br /> 货物入库日期:
<input type="text" id="data" ng-model="data1" /><br />
<input type="button" id="bc" value="保存" ng-click="bc()" />
</div>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {
$scope.shows = false;
$scope.names = ["按照库存数量正序排序", "按照库存数量倒序排序", "按照入库时间正序排序", "按照入库时间倒序排序"];
$scope.goods = [{
"name": "云南白药",
"count": 100,
"addr": "云南",
"price": 19.9,
"data1": "2017-11-20 11:31:32"
}, {
"name": "999感冒灵",
"count": 30,
"addr": "北京",
"price": 12.9,
"data1": "2017-11-19 11:31:32"
}, {
"name": "感康",
"count": 20,
"addr": "河北",
"price": 9.9,
"data1": "2017-11-20 12:31:32"
}];
$scope.add = function() {
$scope.shows = true;
}
$scope.bc = function() {
$scope.goods.push({
name: $scope.name,
count: $scope.count,
addr: $scope.addr,
price: $scope.price,
data1: $scope.data1
});
$scope.shows = false;
}
$scope.del = function(index) {
if (confirm("确认是否删除?")) {
$scope.goods.splice(index, 1);
}
}
$scope.change = function() {
var xx = $scope.px;
if (xx == "按照库存数量正序排序") {
$scope.goods.sort(function(a, b) {
if (a.count > b.count) {
return 1;
} else if (a.count < b.count) {
return -1;
}
return 0;
});
} else if (xx == "按照库存数量倒序排序") {
$scope.goods.sort(function(a, b) {
if (a.count > b.count) {
return -1;
} else if (a.count < b.count) {
return 1;
}
return 0;
});
}
}
var flag = false;
$scope.all = function() {
var cbs = $("input[type=checkbox]");
if (flag == false) {
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = true;
}
flag = true;
} else {
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = false;
}
flag = false;
}
}
$scope.delAll = function() {
if (confirm("确认删除吗?")) {
var cbs = $("input[type=checkbox][id=zcb]:checked");
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
var tr = cb.parentNode.parentNode;
tr.remove();
}
}
}
});
</script>
</body>
</html>