<!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>
