死数据

最新推荐文章于 2022-07-28 08:45:00 发布

嘿嘿嘿1111

最新推荐文章于 2022-07-28 08:45:00 发布

阅读量426

点赞数

本文链接：https://blog.csdn.net/qq_41436470/article/details/79064032

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table tr:nth-child(even){
background-color: blue;
}
table tr:nth-child(odd){
background-color: deeppink;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//准备初始数据

//定义时间
var date1=new Date("2017-11-20 09:32:21");
var date2=new Date("2017-11-20 10:32:21");
var date3=new Date("2017-11-20 11:11:11");

$scope.goods=[{
name:"云南白药",
num:100,
address:"云南",
price:19.9,
date:date1,
flag:true

},{
name:"999感冒灵",
num:30,
address:"北京",
price:12.5,
date:date2,
flag:true
},{
name:"感康",
num:20,
address:"河北",
price:16.6,
date:date3,
flag:true
}];

//搜索关键
$scope.serach="";
$scope.serach1="";

$scope.orderByKey="";

//添加

$scope.add=false;
$scope.xg=false;

$scope.ifAdd=function($index){
$scope.add=!$scope.add;
}
//准备添加数据
$scope.newname="";
$scope.newnum="";
$scope.newaddress="";
$scope.newprice="";

//准备修改数据
$scope.newname1="";
$scope.newnum1="";
$scope.newaddress1="";
$scope.newprice1="";

$scope.updateIndex=0;
//添加商品

$scope.addGood=function(){

//创建对象
var good={
name:$scope.newname,
num:$scope.newnum,
address:$scope.newaddress,
price:$scope.newprice,
date:new Date()
};
$scope.goods.push(good);
$scope.add=false;
}

//删除
$scope.deleteGood=function($index){

if(confirm("您确认删除吗？")){
$scope.goods.splice($index,1);
}else{
alert("您取消了");
}

}

//修改

$scope.updateIndex=0;
$scope.updateGood=function($index){
$scope.updateIndex=$index;
//显示修改区域
$scope.xg=true;

$scope.newname1=$scope.goods[$index].name;
$scope.newnum1=$scope.goods[$index].num;
$scope.newaddress1=$scope.goods[$index].address;
$scope.newprice1=$scope.goods[$index].price;

}

$scope.xgGood=function($index){
$scope.goods[$scope.updateIndex].name=$scope.newname1;
$scope.goods[$scope.updateIndex].num=$scope.newnum1;
$scope.goods[$scope.updateIndex].address=$scope.newaddress1;
$scope.goods[$scope.updateIndex].price=$scope.newprice1;

$scope.xg=false;
}
$scope.unameblur = function(){
if($scope.newname.length<6 || $scope.newname.length>12){
alert("用户名长度不对");
$scope.newname = "";
return false;
}
}

});

</script>
<style>
span{
background-color: red;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="输入名称关键字搜索" ng-model="serach"/>
<input type="text" placeholder="输入数量关键字搜索" ng-model="serach1"/>
                                                                                  

<select ng-model="orderByKey">
<option value="">--请选择--</option><br />
<option value="num">按货物数量正序排序</option><br />
<option value="-num">按货物数量降序排序</option><br />
<option value="date">按时间正序排序</option><br />
<option value="-date">按事件降序排序</option><br />
</select>

<input type="button" value="入库" ng-click="ifAdd();" style="background-color: lawngreen;"/>
<br />
<table border="1">
<tr style="background-color: white;"><th width="120">货物名称</th><th width="120">货物数量</th><th width="120">货物产地</th><th width="120" ng-click="orderByKey='price'">货物单价</th><th>货物入库时间</th><th >操作</th></tr>
<tr ng-repeat="g in goods | orderBy:orderByKey | filter:{name:serach,num:serach1}">

<td>{{g.name}}</td>
<td>{{g.num}}</td>
<td>{{g.address}}</td>
<td>{{g.price | currency:"￥"}}</td>
<td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td><input type="button" value="删除" ng-click="deleteGood($index)"/>
<input type="button" value="修改" ng-click="updateGood($index)"/>
</td>
</tr>

</table><br />
<form name="myform">
<div ng-show="add">
货物名称<input type="text" placeholder="请输入货物名称" ng-model="newname" name="uname" ng-blur="unameblur();" required/>
<span ng-show="myform.uname.$error.required">不能为空</span>
<br />
货物数量<input type="text" placeholder="请输入货物数量" ng-model="newnum"/><br />
货物产地<input type="text" placeholder="请输入货物产地" ng-model="newaddress"/><br />
货物单价<input type="text" placeholder="请输入货物单价" ng-model="newprice"/><br />
<input type="button" value="添加" ng-click="addGood();"/>
</div>

<div ng-show="xg">
货物名称<input type="text" placeholder="请输入货物名称" ng-model="newname1"/><br />
货物数量<input type="text" placeholder="请输入货物数量" ng-model="newnum1"/><br />
货物产地<input type="text" placeholder="请输入货物产地" ng-model="newaddress1"/><br />
货物单价<input type="text" placeholder="请输入货物单价" ng-model="newprice1"/><br />
<input type="button" value="修改" id="button1" ng-click="xgGood();"/>
</div>
</form>
</center>

</body>
</html>
]

嘿嘿嘿1111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
死数据

table tr:nth-child(even){ background-color: blue; } table tr:nth-child(odd){ background-color: deeppink; }var app=angular.module("myApp",[]);app.control
复制链接

扫一扫