Angular发货添加验证等

最新推荐文章于 2023-05-06 23:02:13 发布

已成回忆1234

最新推荐文章于 2023-05-06 23:02:13 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/dxt0528/article/details/78861265

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 800px;
height: 600px;
/*background: cyan;*/
margin: 20px auto;
}
.id1{
background: deepskyblue;
margin-left: 5px;
}
.id2{
background: yellow;
}
.id3{
background:yellowgreen;
}

table{
border: 1px solid black;
width: 800px;
}
td{
border: 1px solid black;
}
form{
border: 1px solid black;
width: 800px;
height: 400px;
margin-top: 20px;
}
.ys{
margin-top: 10px;
margin-left: 250px;
}

</style>
<script src="../js/angular.min.js"></script>
<script src="../js/jquery-1.11.1.js"></script>
<script>
var myapp=angular.module("dxtapp",[]);
myapp.controller("myCtrl",["$scope",function($scope){

$scope.toadd=false;
$scope.goods=[
{
id:2001,
name:"iPhoneX",
uname:"张三",
tel:13525565588,
price:8699,
city:"北京",
shijian:new Date("11-23 10:00:00"),
fahuo:false
},
{
id:3006,
name:"iPhone6",
uname:"王红",
tel:18524565588,
price:5635,
city:"郑州",
shijian:new Date("11-23 11:38:20"),
fahuo:false
},
{
id:5312,
name:"iPhone7",
uname:"张三",
tel:17545565588,
price:6189,
city:"北京",
shijian:new Date("11-20 09-17:28"),
fahuo:false
},
{
id:2131,
name:"iPhone8",
uname:"赵小龙",
tel:13525565588,
price:7190,
city:"上海",
shijian:new Date("11-23 10:40:21"),
fahuo:false
},
];

//添加
$scope.add=function(){
//判断
var tid=$(".t_id").val();
if(tid==undefined||tid==""){
$(".s_id").text("id不能为空");
$(".s_id").css("background","yellow");
$(".t_id").css("border-color","red");
return;
}else{
$(".t_id").css("border-color","black");
}
var tname=$(".name1").val();
if(tname==undefined||tname==""){
$(".name2").text("商品名不能为空");
$(".name2").css("background","yellow");
$(".name1").css("border-color","red");
return;
}else{
$(".name1").css("border-color","black");
}
var tuname=$(".uname1").val();
if(tuname==undefined||tuname==""){
$(".uname2").text("用户名不能为空");
$(".uname2").css("background","yellow");
$(".name1").css("border-color","red");
return;
}else{
$(".name1").css("border-color","black");
}
var ttel=$(".tel1").val();
if(ttel==undefined||ttel==""){
$(".tel2").text("手机号不能为空");
$(".tel2").css("background","yellow");
$(".tel1").css("border-color","red");
return;
}else{
$(".tel1").css("border-color","black");
}
var tprice=$(".price1").val();
if(tprice==undefined||tprice==""){
$(".price2").text("价格不能为空");
$(".price2").css("background","yellow");
$(".price1").css("border-color","red");
return;
}else{
$(".price1").css("border-color","black");
}
var tcity=$(".city1").val();
if(tcity==undefined||tcity==""){
$(".city2").text("城市必须选择");
$(".city2").css("background","yellow");
$(".city1").css("border-color","red");
return;
}else{
$(".city1").css("border-color","black");
}
var tshijian=$(".shijian1").val();
if(tshijian==undefined||tshijian==""){
$(".shijian2").text("时间不能为空");
$(".shijian2").css("background","yellow");
$(".shijian1").css("border-color","red");
return;
}else{
$(".shijian1").css("border-color","black");
}
var gid=$scope.gid;
var gname=$scope.gname;
var guname=$scope.guname;
var gtel=$scope.gtel;
var gprice=$scope.gprice;
var gcity=$scope.gcity;
var gshijian=$scope.gshijian;
$scope.toadd=false;
$scope.goods.push({id:gid,name:gname,uname:guname,tel:gtel,price:gprice,city:gcity,shijian:gshijian});
};
//全选
$scope.ckAll=function(){
for(var i in $scope.goods){
$scope.goods[i].state=$scope.ckall;
}
};

$scope.delAll=function(){
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].state&&$scope.goods[i].fahuo){
$scope.goods.splice(i,1);
i--;
}
}
};
}])
</script>
</head>
<body ng-app="dxtapp" ng-controller="myCtrl">
<div class="box">
<p><button class="id1" ng-click="toadd=true">新增订单</button>
<button class="id1" ng-click="delAll()">批量删除</button>
<input type="text" placeholder="按商品名称查询" ng-model="sel"/>
<input type="text" placeholder="按手机号查询" ng-model="sel1"/>
<select ng-model="sel2">
<option value="">按状态查询</option>
<option value="false">未发货</option>
<option value="true">已发货</option>
</select></p>
<table border="1" cellspacing="0">
<tr style="background: darkgray;">
<td><input type="checkbox" ng-model="ckall" ng-click="ckAll()"/></td>
<td>id<button class="id1" ng-click="px='id';index=!index">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button class="id1" ng-click="px='price';index=!index">排序</button></td>
<td>城市</td>
<td>下单时间<button class="id1" ng-click="px='shijian';index=!index">排序</button></td>
<td>状态</td>
</tr>
<tr ng-repeat="g in goods|filter:{name:sel,tel:sel1,fahuo:sel2}|orderBy:px:index">
<td><input type="checkbox" ng-model="g.state"/></td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.uname}}</td>
<td>{{g.tel}}</td>
<td>{{g.price|currency:"￥"}}</td>
<td>{{g.city}}</td>
<td>{{g.shijian|date:"MM-dd hh:mm:ss"}}</td>
<td>
<button ng-click="g.fahuo=true" class="id2" ng-show="!g.fahuo">未发货</button>
<button ng-show="g.fahuo" class="id3" ng-click="g.fahuo=false">已发货</button>
</td>
</tr>
</table>

<form ng-show="toadd">
<button style="margin-left: 400px;margin-top: 20px;">新增订单</button><br />
<p><span class="ys">id</span><input type="text" ng-model="gid" class="t_id" style="width: 300px;"/><span class="s_id"></span></p>
<p><span class="ys">商品名</span><input type="text" ng-model="gname" class="name1" style="width: 300px;"/><span class="name2"></span></p>
<p><span class="ys">用户名</span><input type="text" ng-model="guname" class="uname1" style="width: 300px;"/><span class="uname2"></span></p>
<p><span class="ys">手机号</span><input type="text" ng-model="gtel" class="tel1" style="width: 300px;"/><span class="tel2"></span></p>
<p><span class="ys">价格为</span><input type="text" ng-model="gprice" class="price1" style="width: 300px;"/><span class="price2"></span></p>
<p><span class="ys">城市</span><select ng-model="gcity" class="city1" style="width: 300px;">
<option value="">--选择城市--</option>
<option>上海</option>
<option>天津</option>
<option>江苏</option>
<option>河北</option>
</select><span class="city2"></span></p>
<p><span class="ys">时间</span><input type="date" ng-model="gshijian" class="shijian1" style="width: 300px;" /><span class="shijian2"></span>
<p><button ng-click="add()" style="margin-left: 400px;">保存</button></p>
</form>
</div>
</body>
</html>

已成回忆1234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular发货添加验证等

.box{width: 800px;height: 600px;/*background: cyan;*/margin: 20px auto;}.id1{background: deepskyblue;margin-left: 5px;}.id2{background: yellow;}.id3{background:yellowgreen;
复制链接

扫一扫