Ship

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

	//Control whether the added area is hidden
	$scope.goods = [];
	for(var i = 0; i < 5; i++) {
	var g = {
	ck: false,
	id: i + 10,
	gname: 'oppo' + i,
	uname: 'Zhang Fei' + i,
	tel: "13522746372",
	price: 1000 + i,
	city: 'Beijing',
	regdate: new Date("2017-7-" + (i + 1)),
	state: 'Not shipped'
	};
	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>

Guess you like