<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style> | |
#container input{ | |
display: block; | |
} | |
</style> | |
<script type="text/javascript" src="js/angular.js" ></script> | |
<script> | |
angular.module("gaoyn", []) | |
.controller("democ", function($scope) { | |
$scope.f=false; | |
//控制添加区域是否隐藏 | |
$scope.goods = []; | |
for(var i = 0; i < 5; i++) { | |
var g = { | |
ck: false, | |
id: i + 10, | |
gname: 'oppo' + i, | |
uname: '张飞' + i, | |
tel: "13522746372", | |
price: 1000 + i, | |
city: '北京', | |
regdate: new Date("2017-7-" + (i + 1)), | |
state: '未发货' | |
}; | |
var g1 = { | |
ck: false, | |
id: i + 1, | |
gname: 'oppo' + i, | |
uname: '赵云' + i, | |
tel: "13522746372", | |
price: 1000 + i, | |
city: '上海', | |
regdate: new Date("2017-1-" + (i + 1)), | |
state: '已发货' | |
}; | |
$scope.goods.push(g); | |
$scope.goods.push(g1); | |
} | |
$scope.ms = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; | |
$scope.citys = ["北京", "上海"]; | |
//添加 | |
$scope.save = function() { | |
//处理商品名中是否含有米-->则替换 | |
var reg_=/米/g; | |
var suname=$scope.add_gname.replace(reg_,"*"); | |
console.log(suname,"++++");// | |
var g1 = { | |
ck: false, | |
id: $scope.goods.length + 1, //新增id,id不能重复 | |
gname: suname, | |
uname: $scope.add_uname, | |
tel: $scope.add_tel, | |
price: $scope.add_price, | |
city: $scope.add_city, | |
regdate: new Date(), | |
state: '未发货' | |
}; | |
$scope.goods.push(g1); | |
$scope. f=false; //让添加区域进行隐藏 | |
} | |
//批量发货 | |
$scope.fhall = function() { | |
for(var i = 0; i < $scope.goods.length; i++) { | |
if($scope.goods[i].ck) { | |
$scope.goods[i].state = '已发货'; | |
} | |
} | |
} | |
//批量删除 | |
$scope.delall = function() { | |
for(var i = 0; i < $scope.goods.length; i++) { | |
if($scope.goods[i].ck) { | |
$scope.goods.splice(i, 1); | |
i--; //防止隔行删除 | |
} | |
} | |
} | |
//设置月份的开始和结束 | |
$scope.yue = function(m) { | |
var currentd = m.getMonth() + 1; //0-11 | |
//获取开始日期 | |
var start = $scope.startm; | |
//获取结束月份 | |
var end = $scope.endm; | |
if(start == "") start = undefined; | |
if(end == "") end = undefined; | |
if(start == undefined && end != undefined) { | |
if(currentd <= end) { | |
return true; | |
} | |
} else if(start != undefined && end == undefined) { | |
if(currentd >= start) { | |
return true; | |
} | |
} else if(start == undefined && end == undefined) { | |
return true; | |
} else if(currentd >= start && currentd <= end) { | |
return true; | |
} | |
return false; | |
} | |
//全选反选 | |
$scope.quanxuan = function(){ | |
for(var i=0; i<$scope.goods.length; i++){ | |
$scope.goods[i].ck = $scope.ckis; | |
} | |
} | |
//删除 | |
$scope.shan = function(id){ | |
for(var i=0;i<$scope.goods.length;i++){ | |
if($scope.goods[i].id==id){ | |
$scope.goods.splice(i,1); | |
} | |
} | |
} | |
//修改 | |
$scope.xiugai = function(tels){ | |
var aa = prompt("手机号",tels.tel); | |
if(aa!=undefined){ | |
tels.tel = aa; | |
} | |
} | |
}) | |
</script> | |
<style> | |
tbody tr:nth-child(2n) { | |
background-color: #999; | |
} | |
thead th { | |
background: deepskyblue; | |
} | |
</style> | |
</head> | |
<body ng-app="gaoyn" ng-controller="democ"> | |
<center> | |
<input type="text" placeholder='请输入查询的姓名' ng-model="sname" /> | |
<input type="text" placeholder='手机号搜索' ng-model="stel" /> | |
<select ng-model="scity"> | |
<option value="">选择城市</option>- | |
<option ng-repeat="m in citys">{{m}}</option> | |
</select> | |
<select ng-model="sstate"> | |
<option value="">选择状态</option>- | |
<option>已发货</option> | |
<option>未发货</option> | |
</select> | |
<select ng-model="startm"> | |
<option value="">开始月份</option>- | |
<option ng-repeat="m in ms">{{m}}</option> | |
</select> | |
<select ng-model="endm"> | |
<option value="">结束月份</option> | |
<option ng-repeat="m in ms">{{m}}</option> | |
</select> | |
<p> | |
<button ng-click="f=true">新增订单</button> | |
<button ng-click="fhall()">批量发货</button> | |
<button ng-click="delall()">批量删除</button> 敏感字替换成* | |
</p> | |
<table border="1px"> | |
<thead> | |
<tr> | |
<th><input type="checkbox" ng-model="ckis" ng-click="quanxuan()" /></th> | |
<th>id</th> | |
<th>商品名</th> | |
<th>用户名</th> | |
<th>手机号</th> | |
<th>价格</th> | |
<th>城市</th> | |
<th>下单时间</th> | |
<th>状态</th> | |
<th>操作</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr ng-repeat="g in goods|filter:{uname:sname,tel:stel,city:scity,state:sstate}" ng-show="yue(g.regdate)"> | |
<td><input type="checkbox" ng-model="g.ck" /> </td> | |
<td>{{g.id}}</td> | |
<td>{{g.gname}} <input type="text" ng-show="fl" ng-model="g.gname" /> </td> | |
<td>{{g.uname}} </td> | |
<td>{{g.tel}} </td> | |
<td>{{g.price|currency:'¥'}}</td> | |
<td>{{g.city}}</td> | |
<td>{{g.regdate|date:'MM-dd hh:mm'}}</td> | |
<td> | |
<span ng-if="g.state=='未发货'"> | |
<a href="#" ng-click="g.state='已发货'">{{g.state}} </a> | |
</span> | |
<span ng-if="g.state=='已发货'"> | |
已发货 | |
</span> | |
</td> | |
<td> | |
<button ng-click="xiugai(g)">修改</button> | |
<button ng-click="shan(g.id)">删除</button> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
<div ng-show="f" id="container"> | |
<input ng-model="add_gname" placeholder="请输入商品名" /> | |
<input ng-model="add_uname" placeholder="请输入用户名" /> | |
<input ng-model="add_tel" placeholder="请输入电话" type="tel" /> | |
<input ng-model="add_price" placeholder="请输入价格" type="number" /> | |
<select ng-model="add_city"> | |
<option value="">请输入城市</option> | |
<option>北京</option> | |
<option>上海</option> | |
</select> | |
<button ng-click="save()">保存</button> | |
</div> | |
</center> | |
</body> | |
</html> |
发货
猜你喜欢
转载自blog.csdn.net/qq_41992168/article/details/80171858
今日推荐
周排行