<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular-/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//定义数组
$scope.goods=[{
state:false,
id:1,
proname:"OPPO R9s",
name:"刘晓栋",
tel:13521787614,
price:2888,
num:3,
city:"北京",
xdate:new Date("2017-08-06"),
fahuo:"未发货"
},{
state:false,
id:4,
proname:"三星 s7",
name:"张三",
tel:1651661616,
price:3888,
num:2,
city:"上海",
xdate:new Date("2017-07-15"),
fahuo:"未发货"
},{
state:false,
id:6,
proname:"iphone ",
name:"李四",
tel:13821787614,
price:6888,
num:1,
city:"天津",
xdate:new Date("2017-04-06"),
fahuo:"未发货"
},{
state:false,
id:7,
proname:"魅蓝5s",
name:"关羽",
tel:1556465411,
price:1888,
num:5,
city:"重庆",
xdate:new Date("2017-05-06"),
fahuo:"未发货"
}];
//全选反选
$scope.selectAll=function(){
//for循环
for (index in $scope.goods) {
$scope.goods[index].state=$scope.select;
}
}
//删除
$scope.shan=function(dele){
//for循环
for (index in $scope.goods) {
if($scope.goods[index].id==dele){
$scope.goods.splice(index,1);
}
}
}
//批量删除
$scope.plsc=function(){
for (var i=0; i<$scope.goods.length;i++) {
if($scope.goods[i].state==true){
$scope.goods.splice(i,1);
i--;
}
}
}
//新增订单
$scope.add=false;
$scope.save=function(){
//敏感字替换
var mg=/米/g;
var s={
state:false,
id:$scope.add_id,
proname:$scope.add_proname.replace(mg,"*"),
name:$scope.add_name,
tel:$scope.add_tel,
price:$scope.add_price,
num:$scope.add_num,
city:$scope.add_city,
xdate:new Date(),
fahuo:"未发货"
}
$scope.goods.push(s);
//点击保存后消失
$scope.add=false;
//第二次添加时框里内容为空
$scope.add_id="";
$scope.add_proname="";
$scope.add_name="";
$scope.add_tel="";
$scope.add_price="";
$scope.add_num="";
$scope.add_city="";
}
//批量发货
$scope.plfahuo=function(){
for (var i=0; i<$scope.goods.length;i++) {
if($scope.goods[i].state==true){
$scope.goods[i].fahuo="已发货";
}
}
}
//月份查询
$scope.m=[1,2,3,4,5,6,7,8,9,10,11,12];
$scope.yue=function(d){
//获取当前月份
var mo=d.getMonth()+1;
//获取开始和结束下拉列表\n
var star=$scope.stard;
var end=$scope.endd;
//判断
if(star=="" || star==undefined){
star=1;
}
if(end=="" || end==undefined){
end=12;
}
if(mo>=star&&mo<=end){
return true;
}else{
return false;
}
}
//总金额
$scope.sumall=function(){
var sums=0;
for (var i=0; i<$scope.goods.length;i++) {
sums+=$scope.goods[i].price*$scope.goods[i].num;
}
return sums;
}
//点击-按钮商品数量>0 --
$scope.less=function(id){
for (index in $scope.goods) {
if(id==$scope.goods[index].id){
if($scope.goods[index].num>0){
$scope.goods[index].num--;
}
}
}
}
//添加一条数据后点击按钮++
$scope.upNum = function(id){
for (index in $scope.goods) {
if(id==$scope.goods[index].id){
//转义
$scope.goods[index].num = parseInt($scope.goods[index].num) + 1
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="用户名搜索" ng-model="nsearch"/>
<input type="text" placeholder="电话号码搜索" ng-model="tsearch"/>
<select ng-model="xcity">
<option value="">选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
<option>石家庄</option>
</select>
<select ng-model="xstate">
<option value="">选择状态</option>
<option>未发货</option>
<option>已发货</option>
</select>
<select ng-model="idorderBy">
<option value="">根据id排序</option>
<option value="+id">id升序排序</option>
<option value="-id">id降序排序</option>
</select>
<select ng-model="stard">
<option value="">开始日期</option>
<option ng-repeat=" mm in m">{{mm}}</option>
</select>
<select ng-model="endd">
<option value="">结束日期</option>
<option ng-repeat=" mm in m">{{mm}}</option>
</select>
<br />
<button ng-click="add=true">新增订单</button>
<button ng-click="plsc()">批量删除</button>
<button ng-click="plfahuo()">批量发货</button>
<span>敏感字:米(商品名)->替换成*</span>
<table border="1" width="900px;">
<thead>
<th><input type="checkbox" ng-click="selectAll()" ng-model="select"/></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>数量</th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th>小计</th>
<th>操作</th>
</thead>
<tbody align="center">
<tr ng-repeat=" a in goods | filter:{name:nsearch,tel:tsearch,city:xcity,fahuo:xstate}| orderBy:idorderBy" ng-show="yue(a.xdate)">
<td><input type="checkbox" ng-model="a.state"/></td>
<td>{{a.id}}</td>
<td>{{a.proname}}<span ng-show="xiu"><input type="text" ng-model="a.proname"/><button ng-click="xiu=false">保存</button></span></td>
<td>{{a.name}}</td>
<td>{{a.tel}}</td>
<td>{{a.price | currency:"￥"}}</td>
<td><button ng-click="less(a.id)">-</button>{{a.num}}<button ng-click="upNum(a.id)">+</button></td>
<td>{{a.city}}</td>
<td>{{a.xdate | date:"yyyy-MM-dd"}}</td>
<td>
<span ng-if="a.fahuo=='已发货'">
已发货
</span>
<span ng-if="a.fahuo=='未发货'">
<a href="#" ng-click="a.fahuo='已发货'">{{a.fahuo}}</a>
</span>
</td>
<td>{{a.price*a.num | currency:"￥"}}</td>
<td><button ng-click="xiu=true">修改</button><button ng-click="shan(a.id)">删除</button></td>
</tr>
<tr>
<td colspan="5">总金额:<span ng-bind="sumall()| currency:'￥'"></span></td>
</tr>
</tbody>
</table>
<div ng-show="add">
<input type="text" placeholder="请输入id" ng-model="add_id"/><br />
<input type="text" placeholder="请输入商品名称" ng-model="add_proname"/><br />
<input type="text" placeholder="请输入名字" ng-model="add_name"/><br />
<input type="text" placeholder="请输入电话" ng-model="add_tel"/><br />
<input type="text" placeholder="请输入价格" ng-model="add_price"/><br />
<input type="text" placeholder="请输入数量" ng-model="add_num"/><br />
<input type="text" placeholder="请输入城市" ng-model="add_city"/><br />
<button ng-click="save()">添加</button>
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular-/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//定义数组
$scope.goods=[{
state:false,
id:1,
proname:"OPPO R9s",
name:"刘晓栋",
tel:13521787614,
price:2888,
num:3,
city:"北京",
xdate:new Date("2017-08-06"),
fahuo:"未发货"
},{
state:false,
id:4,
proname:"三星 s7",
name:"张三",
tel:1651661616,
price:3888,
num:2,
city:"上海",
xdate:new Date("2017-07-15"),
fahuo:"未发货"
},{
state:false,
id:6,
proname:"iphone ",
name:"李四",
tel:13821787614,
price:6888,
num:1,
city:"天津",
xdate:new Date("2017-04-06"),
fahuo:"未发货"
},{
state:false,
id:7,
proname:"魅蓝5s",
name:"关羽",
tel:1556465411,
price:1888,
num:5,
city:"重庆",
xdate:new Date("2017-05-06"),
fahuo:"未发货"
}];
//全选反选
$scope.selectAll=function(){
//for循环
for (index in $scope.goods) {
$scope.goods[index].state=$scope.select;
}
}
//删除
$scope.shan=function(dele){
//for循环
for (index in $scope.goods) {
if($scope.goods[index].id==dele){
$scope.goods.splice(index,1);
}
}
}
//批量删除
$scope.plsc=function(){
for (var i=0; i<$scope.goods.length;i++) {
if($scope.goods[i].state==true){
$scope.goods.splice(i,1);
i--;
}
}
}
//新增订单
$scope.add=false;
$scope.save=function(){
//敏感字替换
var mg=/米/g;
var s={
state:false,
id:$scope.add_id,
proname:$scope.add_proname.replace(mg,"*"),
name:$scope.add_name,
tel:$scope.add_tel,
price:$scope.add_price,
num:$scope.add_num,
city:$scope.add_city,
xdate:new Date(),
fahuo:"未发货"
}
$scope.goods.push(s);
//点击保存后消失
$scope.add=false;
//第二次添加时框里内容为空
$scope.add_id="";
$scope.add_proname="";
$scope.add_name="";
$scope.add_tel="";
$scope.add_price="";
$scope.add_num="";
$scope.add_city="";
}
//批量发货
$scope.plfahuo=function(){
for (var i=0; i<$scope.goods.length;i++) {
if($scope.goods[i].state==true){
$scope.goods[i].fahuo="已发货";
}
}
}
//月份查询
$scope.m=[1,2,3,4,5,6,7,8,9,10,11,12];
$scope.yue=function(d){
//获取当前月份
var mo=d.getMonth()+1;
//获取开始和结束下拉列表\n
var star=$scope.stard;
var end=$scope.endd;
//判断
if(star=="" || star==undefined){
star=1;
}
if(end=="" || end==undefined){
end=12;
}
if(mo>=star&&mo<=end){
return true;
}else{
return false;
}
}
//总金额
$scope.sumall=function(){
var sums=0;
for (var i=0; i<$scope.goods.length;i++) {
sums+=$scope.goods[i].price*$scope.goods[i].num;
}
return sums;
}
//点击-按钮商品数量>0 --
$scope.less=function(id){
for (index in $scope.goods) {
if(id==$scope.goods[index].id){
if($scope.goods[index].num>0){
$scope.goods[index].num--;
}
}
}
}
//添加一条数据后点击按钮++
$scope.upNum = function(id){
for (index in $scope.goods) {
if(id==$scope.goods[index].id){
//转义
$scope.goods[index].num = parseInt($scope.goods[index].num) + 1
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="用户名搜索" ng-model="nsearch"/>
<input type="text" placeholder="电话号码搜索" ng-model="tsearch"/>
<select ng-model="xcity">
<option value="">选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
<option>石家庄</option>
</select>
<select ng-model="xstate">
<option value="">选择状态</option>
<option>未发货</option>
<option>已发货</option>
</select>
<select ng-model="idorderBy">
<option value="">根据id排序</option>
<option value="+id">id升序排序</option>
<option value="-id">id降序排序</option>
</select>
<select ng-model="stard">
<option value="">开始日期</option>
<option ng-repeat=" mm in m">{{mm}}</option>
</select>
<select ng-model="endd">
<option value="">结束日期</option>
<option ng-repeat=" mm in m">{{mm}}</option>
</select>
<br />
<button ng-click="add=true">新增订单</button>
<button ng-click="plsc()">批量删除</button>
<button ng-click="plfahuo()">批量发货</button>
<span>敏感字:米(商品名)->替换成*</span>
<table border="1" width="900px;">
<thead>
<th><input type="checkbox" ng-click="selectAll()" ng-model="select"/></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>数量</th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th>小计</th>
<th>操作</th>
</thead>
<tbody align="center">
<tr ng-repeat=" a in goods | filter:{name:nsearch,tel:tsearch,city:xcity,fahuo:xstate}| orderBy:idorderBy" ng-show="yue(a.xdate)">
<td><input type="checkbox" ng-model="a.state"/></td>
<td>{{a.id}}</td>
<td>{{a.proname}}<span ng-show="xiu"><input type="text" ng-model="a.proname"/><button ng-click="xiu=false">保存</button></span></td>
<td>{{a.name}}</td>
<td>{{a.tel}}</td>
<td>{{a.price | currency:"￥"}}</td>
<td><button ng-click="less(a.id)">-</button>{{a.num}}<button ng-click="upNum(a.id)">+</button></td>
<td>{{a.city}}</td>
<td>{{a.xdate | date:"yyyy-MM-dd"}}</td>
<td>
<span ng-if="a.fahuo=='已发货'">
已发货
</span>
<span ng-if="a.fahuo=='未发货'">
<a href="#" ng-click="a.fahuo='已发货'">{{a.fahuo}}</a>
</span>
</td>
<td>{{a.price*a.num | currency:"￥"}}</td>
<td><button ng-click="xiu=true">修改</button><button ng-click="shan(a.id)">删除</button></td>
</tr>
<tr>
<td colspan="5">总金额:<span ng-bind="sumall()| currency:'￥'"></span></td>
</tr>
</tbody>
</table>
<div ng-show="add">
<input type="text" placeholder="请输入id" ng-model="add_id"/><br />
<input type="text" placeholder="请输入商品名称" ng-model="add_proname"/><br />
<input type="text" placeholder="请输入名字" ng-model="add_name"/><br />
<input type="text" placeholder="请输入电话" ng-model="add_tel"/><br />
<input type="text" placeholder="请输入价格" ng-model="add_price"/><br />
<input type="text" placeholder="请输入数量" ng-model="add_num"/><br />
<input type="text" placeholder="请输入城市" ng-model="add_city"/><br />
<button ng-click="save()">添加</button>
</center>
</body>
</html>