angularjs商品管理系统

最新推荐文章于 2020-12-21 23:53:46 发布

wanglinuo521

最新推荐文章于 2020-12-21 23:53:46 发布

阅读量525

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wanglinuo521/article/details/79048214

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
<script src="../libs/jquery-1.11.0.min.js"></script>
<script src="../libs/angular-route.min.js"></script>
<style>
.div1 {
width: 700px;
height: 50px;
}

.div2 {
width: 100px;
background: greenyellow;
text-align: center;
margin-top: 15px;
border: 1px solid blue;
float: right;
}

.table {
width: 700px;
height: 50px;
}

.div2 a {
text-decoration: none;
}

select {
margin-top: 15px;
margin-left: 200px;
}

tr:nth-of-type(odd) {
background-color: tan;
}

tr:nth-of-type(odd):hover {
background-color: blue;
}

tr:nth-of-type(even) {
background-color: wheat;
}

tr:nth-of-type(even):hover {
background: blue;
}

fieldset {
width: 700px;
}
</style>
</head>

<body ng-app="myapp" ng-controller="demo">
<h1>商品库存管理系统</h1>
<div class="div1">
<input type="text" placeholder="请输入关键词" ng-model="chaxun" style="margin-top: 15px ;" />
<input type="button" value="查询" ng-click="cx()" style="margin-top: 15px;" />
<select ng-change="xl()" ng-model="count1" ng-init="count1=counts[1]">
<option ng-repeat="count in counts">{{count}}</option>
</select>
<div class="div2">
<a href="#" ng-click="rk()">入库</a>
</div>
</div><br />
<table border="1px" cellpadding="0" cellspacing="0" class="table">
<tr style="background: gray;">
<td>货物名称</td>
<td>货物数量</td>
<td>货物产地</td>
<td>货物单价</td>
<td>货物的生产日期</td>
<td>操作</td>
</tr>
<tr ng-repeat="good in goods">
<td>{{good.gname}}</td>
<td>{{good.gcount}}</td>
<td>{{good.gchandi}}</td>
<td>{{good.gprice | currency:'￥:'}}</td>
<td>{{good.gdate | date:'yyyy-MM-dd hh:mm:ss'}}</td>
<td><input type="button" value="删除" ng-click="delet($index)" /></td>
</tr>
</table>
<fieldset style="margin-top: 20px;" ng-show="sos">
<legend>新增产品</legend>
货物名称<input type="text" ng-model="name_1" />
<span id="name_err"></span><br /> 货物数量
<input type="text" ng-model="count_1" />
<span id="count_err"></span><br /> 货物产地
<input type="text" ng-model="changdi_1" />
<span id="changdi_err"></span><br /> 货物单价
<input type="text" ng-model="price_1" />
<span id="price_err"></span><br />
<input type="button" value="保存" ng-click="add()" />
</fieldset>
<script>
var app = angular.module('myapp', []);
app.controller('demo', function($scope) {
var aa = new Date();
$scope.counts = ["按数量正序", "按数量倒序"];

var good_1 = [{
"gname": "云南白药",
"gcount": "100",
"gchandi": "云南",
"gprice": "19.9",
"gdate": aa
},
{
"gname": "999感冒灵",
"gcount": "30",
"gchandi": "北京",
"gprice": "12.5",
"gdate": aa
},
{
"gname": "感康",
"gcount": "20",
"gchandi": "河北",
"gprice": "16.9",
"gdate": aa
}
];
$scope.goods = good_1;
$scope.xl = function() {
var sl = $scope.count1;
alert(sl);
if(sl == "按数量正序") {
$scope.goods.sort(function(a, b) {
return a.gcount - b.gcount;
})
} else {
$scope.goods.sort(function(a, b) {
return b.gcount - a.gcount;
})
}
}
$scope.delet = function($index) {
var flas = confirm("是否删除");
if(flas = true) {
$scope.goods.splice($index, 1)
}
}
$scope.cx = function() {
$scope.goods = [{
"gname": "云南白药",
"gcount": "100",
"gchandi": "云南",
"gprice": "19.9",
"gdate": aa
},
{
"gname": "999感冒灵",
"gcount": "10",
"gchandi": "北京",
"gprice": "12.5",
"gdate": aa
},
{
"gname": "感康",
"gcount": "40",
"gchandi": "河北",
"grice": "16.9",
"gdate": aa
}
]
var zz = [];

var cc = $scope.chaxun;

for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].gname.indexOf(cc) != -1 || $scope.goods[i].gchandi.indexOf(cc) != -1) {
zz.push($scope.goods[i]);
}
}

$scope.goods = zz;
}

$scope.rk = function() {
$scope.sos = true;
}

$scope.add = function() {

var n = $scope.name_1;

alert(n);
var c = $scope.count_1;
var s = $scope.changdi_1;
var p = $scope.price_1;
var flas = true

if(n == null || n == "") {
$("#name_err").html("不能为空")
flas = false;
return
} else {
$("#name_err").html("")
flas = true
}

var flas1 = true
if(c == null || c == "") {
$("#count_err").html("不能为空")
flas1 = false
return
} else {
$("#count_err").html("")
flas1 = true
}
var flas2 = true
if(s == null || s == "") {
$("#changdi_err").html("不能为空")
flas2 = false;
return
} else {
$("#changdi_err").html("")
flas2 = true
}
var flas3 = true
if(p == null || p == "") {
$("#price_err").html("不能为空")
flas3 = false
return
} else {
$("#price_err").html("")
flas3 = true
}

var qiu2 = {

"gname":$scope.name_1 ,
"gcount": $scope.count_1,
"gchandi": $scope.changdi_1,
"gprice": $scope.price_1,
"gdate": aa
}

good_1.push(qiu2);

$scope.goods = good_1;
$scope.sos = false;

$scope.name_1 = ""
$scope.count_1 = ""
$scope.changdi_1 = ""
$scope.price_1 = ""
}

})
</script>
</body>

</html>

wanglinuo521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs商品管理系统

.div1 {width: 700px;height: 50px;}.div2 {width: 100px;background: greenyellow;text-align: center;margin-top: 15px;border: 1px solid blue;float: right;}.table {width: 700p
复制链接

扫一扫