angular 增删改查

最新推荐文章于 2022-11-17 14:05:54 发布

开心就好吧

最新推荐文章于 2022-11-17 14:05:54 发布

阅读量231

点赞数

本文链接：https://blog.csdn.net/qq_41443109/article/details/79082552

版权

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{ background-image: url(../img/335853-106.jpg);}
tbody tr:nth-child(even){
background-color: #0A9DC7;
}
tbody tr:nth-child(odd){
background-color:#4CD964;
}
</style>
<script type="text/javascript" src="../js/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myctrl",function($scope){

$scope.pros=[{
id:1,
name:"OPPO R9",
username:"武则天",
tel:13716142053,
shu:"3",
price:4999.00,
city:"北京",
time:new Date("01-12 11:00"),
fh:"未发货",
state:false
},{
id:2,
name:"华为",
username:"李世民",
tel:134564688489,
shu:"2",
price:3999.00,
city:"上海",
time:new Date("11-18 10:00"),
fh:"已发货",
state:false
},{
id:3,
name:"小米",
username:"张作霖",
tel:798415165,
shu:"4",
price:2999.00,
city:"吉林",
time:new Date("9-18 10:00"),
fh:"未发货",
state:false
}];
//全选反选
$scope.quan=false;
$scope.quanxuan=function(){
if($scope.quan){
for(index in $scope.pros){
$scope.pros[index].state=true;
}
}else{
for(index in $scope.pros){
$scope.pros[index].state=false;
}
}
}
//删除
$scope.delete=function(clumn){
for(index in $scope.pros){
if($scope.pros[index].id==clumn){
$scope.pros.splice(index,1);
}
if($scope.pros.length==0){
alert("为空");
}
}
}
//添加
$scope.isShow=false;
$scope.add=function(){
var id=$scope.add_id;
var name=$scope.add_name;
var username=$scope.add_username;
var tel=$scope.add_tel;
var shu=$scope.add_shu;
var price=$scope.add_price;
var city=$scope.add_city;
var time=$scope.add_time;
$scope.errors=[];
if(id==0 || id==null || id==undefined){
$scope.errors.push("id不能为空");
}
if(name==0 || name==null){
$scope.errors.push("商品名不能为空");
}else if(name.length<3){
$scope.errors.push("商品名不能小于3");
}
if(username=="" || username==null){
$scope.errors.push("密码不能为空");
}
if(tel=="" || tel==null){
$scope.errors.push("电话不能为空");
}
if(price=="" || price==null){
$scope.errors.push("价格不能为空");
}
if(city=="" || city==null){
$scope.errors.push("城市不能为空");
}
if(time=="" || time==null){
$scope.errors.push("时间不能为空");
}

if($scope.errors.length==0){
var a={
id:$scope.add_id,
name:$scope.add_name,
username:$scope.add_username,
tel:$scope.add_tel,
shu:$scope.add_shu,
price:$scope.add_price,
city:$scope.add_city,
time:$scope.add_time,
fh:$scope.add_fh,
state:false
}
$scope.pros.push(a);
$scope.isShow=false;
}

}
//批量删除
$scope.pil=function(){
for (var i = 0; i < $scope.pros.length; i++) {
if($scope.pros[i].state==true){
$scope.pros.splice(i,1);
i--;
}
}
}
//批量发货
$scope.plfh=function(){
for(index in $scope.pros){
if($scope.pros[index].state==true){
$scope.pros[index].fh="已发货";
}
}
}
//月份
$scope.valdate=function(d){
var m=d.getMonth()+1;
var m1=$scope.m1;
var m2=$scope.m2;
if(m1==null || m1==""){
m1=1;
}
if(m2==null || m2==""){
m2=12;
}
if(m>=m1&&m<=m2){
return true;
}else{
return false;
}
}
//总价

});
</script>
</head>
<body ng-app="myApp" ng-controller="myctrl" >
<center>
<h3>购物单</h3>
<input type="text" placeholder="用户名搜索" ng-model="aa" style="width: 100px;"/>
<input type="text" placeholder="手机号搜索" ng-model="bb" style="width: 100px;"/>
<select ng-model="cc">
<option value="">选择城市</option>
<option>北京</option>
<option>上海</option>
<option>吉林</option>
</select>
<select ng-model="ee">
<option value="">选择状态</option>
<option>未发货</option>
<option>已发货</option>
</select>
<select ng-model="m1">
<option value="">开始月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select ng-model="m2">
<option value="">--结束月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select ng-model="id">
<option value="">ID排序</option>
<option value="+id">正序排序</option>
<option value="-id">倒序排序</option>
</select></br>
<button ng-click="isShow=true">新增订单</button>
<button ng-click="plfh()">批量发货</button>
<button ng-click="pil()">批量删除</button>
<span>敏感字：米（商品名）->替换成*</span>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr style="background-color: #4D4D4D;">
<th><input type="checkbox" ng-model="quan" ng-click="quanxuan()"/></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>数量</th>
<th>价格</th>
<th>城市</th>
<th>下单时间</th>
<th>小计</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pro in pros | filter:{name:aa} | filter:{tel:bb} | filter:{city:cc} | orderBy:id | filter:{fh:ee}" ng-show="valdate(pro.time)">
<td><input type="checkbox" ng-model="pro.state"/></td>
<td>{{pro.id}}</td>
<td>{{pro.name}} <span ng-show="xiugai"><input type="text" ng-model="pro.name"/><button ng-click="xiugai=fasle">保存</button></span></td>
<td>{{pro.username}}</td>
<td>{{pro.tel}}</td>
<td>{{pro.shu}}</td>
<td>{{pro.price | currency:"￥"}}</td>
<td>{{pro.city}}</td>
<td>{{pro.time | date:"MM-dd hh:mm"}}</td>
<td>{{pro.shu*pro.price | currency:"￥"}}</td>
<td>
<span ng-if="pro.fh=='未发货'">
<a href="#" ng-click="pro.fh='已发货'">{{pro.fh}}</a>
</span>
<span ng-if="pro.fh=='已发货'">
已发货
</span>
</td>
<td><button ng-click="xiugai=true">修改</button><button ng-click="delete(pro.id)">删除</button></td>
</tr>
</tbody>

</table></br></br>

<table border="1" ng-show="isShow">
<tr>
<td><input type="number" placeholder="ID" ng-model="add_id"/></td>
</tr>
<tr>
<td><input type="text" placeholder="商品名" ng-model="add_name"/></td>
</tr>
<tr>
<td><input type="text" placeholder="用户名" ng-model="add_username"/></td>
</tr>
<tr>
<td><input type="text" placeholder="手机号" ng-model="add_tel"/></td>
</tr>
<tr>
<td><input type="text" placeholder="数量" ng-model="add_shu"/></td>
</tr>
<tr>
<td><input type="text" placeholder="价格" ng-model="add_price"/></td>
</tr>
<tr>
<td><select ng-model="add_city">
<option value="">选择城市</option>
<option>北京</option>
<option>上海</option>
<option>吉林</option>
</select></td>
</tr>
<tr>
<td><input type="date" placeholder="下单时间" ng-model="add_time"/></td>
</tr>
<tr>
<td><input type="text" placeholder="状态" ng-model="add_fh"/></td>
</tr>
<tr>
<td><button ng-click="add()">提交</button></td>
</tr>
</table>
<div ng-show="errors.length!=0">
<ul>
<li ng-repeat="e in errors">{{e}}</li>
</ul>
</div>
</center>
</body>
</html>

开心就好吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular 增删改查

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>body{ background-image: url(../img/335853-106.jpg);}tbody tr:nth-child(even){...
复制链接

扫一扫