<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/js/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//添加商品
$scope.goods=[
{
id:1,
gname:"OPPOR9S",
uname:"陈佳",
tell:15698546598,
price:4999,
nums:2,
city:"河南",
regDate:new Date("03-09 10:00"),
state:"未发货",
check:false,
add:false
}, {
id:2,
gname:"VIVOX20",
uname:"初亮亮",
tell:13565988598,
price:3999,
nums:3,
city:"东北",
regDate:new Date("05-06 10:00"),
state:"未发货",
check:false,
add:false
}, {
id:3,
gname:"三星",
uname:"陈艺白",
tell:13835674395,
price:5999,
nums:1,
city:"山西",
regDate:new Date("11-18 10:00"),
state:"未发货",
check:false,
add:false
}, {
id:4,
gname:"Iphone",
uname:"冯建一",
tell:14789653241,
price:6999,
nums:2,
city:"河北",
regDate:new Date("06-09 10:00"),
state:"未发货",
check:false,
add:false
},
];
//全选
$scope.qx=function(){
for(i in $scope.goods){
$scope.goods[i].check=$scope.quanxuan;
}
}
//按照用户名查询
$scope.selectUname="";
//按照手机号查询
$scope.selectTell="";
//按照城市查询
$scope.selectCity="";
//按照状态查询
$scope.selectState="";
//批量删除
$scope.deleteGoods=function(){
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].check==true){
$scope.goods.splice(i,1);
i--;
}
}
}
//单条删除
$scope.delete=function($index){
$scope.goods.splice($index);
}
//批量发货
$scope.plfh=function(){
for(i in $scope.goods){
if($scope.goods[i].check==true){
$scope.goods[i].state="已发货";
}
}
}
//新增用户
$scope.save=function(){
var s={
id:$scope.add_id,
gname:$scope.add_gname,
tell:$scope.add_tell,
uname:$scope.add_uname,
price:$scope.add_price,
nums:$scope.add_nums,
city:$scope.add_city,
regDate:$scope.add_regDate,
state:$scope.add_state
}
if($scope.add_id==""||$scope.add_id==null){
$scope.s1=!$scope.s1;
}else if($scope.add_gname==""||$scope.add_gname==null){
$scope.s2=!$scope.s2;
}else if($scope.add_uname==""||$scope.add_uname==null){
$scope.s3=!$scope.s3;
}else if($scope.add_tell==""||$scope.add_tell==null){
$scope.s4=!$scope.s4;
}else if($scope.add_price==""||$scope.add_price==null){
$scope.s5=!$scope.s5;
}else if($scope.add_nums==""||$scope.add_nums==null){
$scope.s6=!$scope.s6;
}else if($scope.add_city==""||$scope.add_city==null){
$scope.s7=!$scope.s7;
}else if($scope.add_regDate==""||$scope.add_regDate==null){
$scope.s8=!$scope.s8;
}else if($scope.add_state==""||$scope.add_state==null){
$scope.s9=!$scope.s9;
}else{
$scope.goods.push(s);
$scope.add_id="";
$scope.sgname="";
$scope.add_tell;
$scope.add_uname="";
$scope.add_price="";
$scope.add_nums="";
$scope.add_city="";
$scope.add_regDate="";
$scope.add_state="";
$scope.add=false;
}
}
//总价格
$scope.zj=function(){
$scope.all=0;
for(i in $scope.goods){
$scope.all+=$scope.goods[i].price+$scope.goods[i].nums;
}
return $scope.all;
}
//按月份查询
$scope.valueDate=function(d){
var m=d.getMonth()+1;
var start=$scope.start;
var end=$scope.end;
if(start==null||start==""){
start=1;
}
if(end==null||end==""){
end=12;
}
if(m>=start&&m<=end){
return true;
}else{
return false;
}
}
});
</script>
<style>
tbody tr:nth-child(even){
background: pink;
}tbody tr:nth-child(odd){
background: yellow;
}
button{
background: #6495ED;
border-radius: 8px;
color:white;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input placeholder="用户名搜索" ng-model="selectUname"/>
<input placeholder="手机号搜索" ng-model="selectTell"/>
<select ng-model="selectCity">
<option value="">---选择城市---</option>
<option>山西</option>
<option>东北</option>
<option>河南</option>
<option>河北</option>
</select>
<select>
<option value="">--选择状态--</option>
<option>已发货</option>
<option>未发货</option>
</select>
<select ng-model="start">
<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="end">
<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="paixu">
<option value="">---排序---</option>
<option value="id">ID正序</option>
<option value="-id">ID倒序</option>
<option value="name">商品名正序</option>
<option value="-name">商品名倒序</option>
<option value="tell">手机号正序</option>
<option value="-tell">手机号倒序</option>
<option value="uname">用户名正序</option>
<option value="-uname">用户名倒序</option>
<option value="regDate">下单时间正序</option>
<option value="-regDate">下单时间倒序</option>
</select>
<br />
<button ng-click="deleteGoods()">批量删除</button>
<button ng-click="plfh()">批量发货</button>
<button ng-click="add=true">新增用户</button>
<table border="1px" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="quanxuan" ng-click="qx()"></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="g in goods |filter:{uname:selectUname,tell:selectTell,city:selectCity,state:selectState} | orderBy:paixu" ng-show="valueDate(g.regDate)">
<td><input type="checkbox" ng-model="g.check"></td>
<td ng-if="">{{$index}}</td>
<td>{{g.id}}</td>
<td>{{g.gname}}</td>
<td>{{g.uname}}</td>
<td>{{g.tell}}</td>
<td><span ng-hide="update">{{g.price}}</span><span ng-show="update"><input type="text" ng-model="g.price"><button ng-click="update=false">保存</button></span></td>
<td><button ng-click="g.nums=g.nums-1">-</button>{{g.nums}}<button ng-click="g.nums=g.nums+1">+</button></td>
<td>{{g.price*g.nums}}</td>
<td>{{g.city}}</td>
<td>{{g.regDate |date:"MM-dd :hh:ss"}}</td>
<td><button ng-click="g.state='已发货'">{{g.state}}</button></td>
<td>
<button ng-click="delete($index)">删除</button>
<button ng-click="update=true">修改</button>
</td>
</tr>
</tbody>
</table>
<div ng-show="add">
<input type="text" placeholder="请输入ID" ng-model="add_id"/><span ng-show="s1">id不能为空</span><br />
<input type="text" placeholder="请输入商品名" ng-model="add_gname"/><span ng-show="s2">gname不能为空</span><br />
<input type="text" placeholder="请输入用户名" ng-model="add_uname"/><span ng-show="s3">unam不能为空</span><br />
<input type="text" placeholder="请输入手机号" ng-model="add_tell"/><span ng-show="s4">tell不能为空</span><br />
<input type="text" placeholder="请输入价格" ng-model="add_price"/><span ng-show="s5">price不能为空</span><br />
<input placeholder="请输入数量" ng-model="add_nums"/><span ng-show="s6">数量不能为空</span><br />
<select ng-model="add_city">
<option value="">---请选择</option>
<option>山西</option>
<option>河南</option>
<option>河北</option>
<option>东北</option>
</select><span ng-show="s7">城市不能为空</span><br>
<input type="date" placeholder="请输入下单日期" ng-model="add_regDate"/><span ng-show="s8">日期不能为空</span><br>
<select ng-model="add_state">
<option value="">--请选择</option>
<option>已发货</option>
<option>未发货</option>
</select><span ng-show="s9">状态不能为空</span><br>
<button ng-click="save()">保存</button>
</div>
</center>
总价格：<span ng-bind="zj() | currency:'￥'"></span>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/js/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//添加商品
$scope.goods=[
{
id:1,
gname:"OPPOR9S",
uname:"陈佳",
tell:15698546598,
price:4999,
nums:2,
city:"河南",
regDate:new Date("03-09 10:00"),
state:"未发货",
check:false,
add:false
}, {
id:2,
gname:"VIVOX20",
uname:"初亮亮",
tell:13565988598,
price:3999,
nums:3,
city:"东北",
regDate:new Date("05-06 10:00"),
state:"未发货",
check:false,
add:false
}, {
id:3,
gname:"三星",
uname:"陈艺白",
tell:13835674395,
price:5999,
nums:1,
city:"山西",
regDate:new Date("11-18 10:00"),
state:"未发货",
check:false,
add:false
}, {
id:4,
gname:"Iphone",
uname:"冯建一",
tell:14789653241,
price:6999,
nums:2,
city:"河北",
regDate:new Date("06-09 10:00"),
state:"未发货",
check:false,
add:false
},
];
//全选
$scope.qx=function(){
for(i in $scope.goods){
$scope.goods[i].check=$scope.quanxuan;
}
}
//按照用户名查询
$scope.selectUname="";
//按照手机号查询
$scope.selectTell="";
//按照城市查询
$scope.selectCity="";
//按照状态查询
$scope.selectState="";
//批量删除
$scope.deleteGoods=function(){
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].check==true){
$scope.goods.splice(i,1);
i--;
}
}
}
//单条删除
$scope.delete=function($index){
$scope.goods.splice($index);
}
//批量发货
$scope.plfh=function(){
for(i in $scope.goods){
if($scope.goods[i].check==true){
$scope.goods[i].state="已发货";
}
}
}
//新增用户
$scope.save=function(){
var s={
id:$scope.add_id,
gname:$scope.add_gname,
tell:$scope.add_tell,
uname:$scope.add_uname,
price:$scope.add_price,
nums:$scope.add_nums,
city:$scope.add_city,
regDate:$scope.add_regDate,
state:$scope.add_state
}
if($scope.add_id==""||$scope.add_id==null){
$scope.s1=!$scope.s1;
}else if($scope.add_gname==""||$scope.add_gname==null){
$scope.s2=!$scope.s2;
}else if($scope.add_uname==""||$scope.add_uname==null){
$scope.s3=!$scope.s3;
}else if($scope.add_tell==""||$scope.add_tell==null){
$scope.s4=!$scope.s4;
}else if($scope.add_price==""||$scope.add_price==null){
$scope.s5=!$scope.s5;
}else if($scope.add_nums==""||$scope.add_nums==null){
$scope.s6=!$scope.s6;
}else if($scope.add_city==""||$scope.add_city==null){
$scope.s7=!$scope.s7;
}else if($scope.add_regDate==""||$scope.add_regDate==null){
$scope.s8=!$scope.s8;
}else if($scope.add_state==""||$scope.add_state==null){
$scope.s9=!$scope.s9;
}else{
$scope.goods.push(s);
$scope.add_id="";
$scope.sgname="";
$scope.add_tell;
$scope.add_uname="";
$scope.add_price="";
$scope.add_nums="";
$scope.add_city="";
$scope.add_regDate="";
$scope.add_state="";
$scope.add=false;
}
}
//总价格
$scope.zj=function(){
$scope.all=0;
for(i in $scope.goods){
$scope.all+=$scope.goods[i].price+$scope.goods[i].nums;
}
return $scope.all;
}
//按月份查询
$scope.valueDate=function(d){
var m=d.getMonth()+1;
var start=$scope.start;
var end=$scope.end;
if(start==null||start==""){
start=1;
}
if(end==null||end==""){
end=12;
}
if(m>=start&&m<=end){
return true;
}else{
return false;
}
}
});
</script>
<style>
tbody tr:nth-child(even){
background: pink;
}tbody tr:nth-child(odd){
background: yellow;
}
button{
background: #6495ED;
border-radius: 8px;
color:white;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input placeholder="用户名搜索" ng-model="selectUname"/>
<input placeholder="手机号搜索" ng-model="selectTell"/>
<select ng-model="selectCity">
<option value="">---选择城市---</option>
<option>山西</option>
<option>东北</option>
<option>河南</option>
<option>河北</option>
</select>
<select>
<option value="">--选择状态--</option>
<option>已发货</option>
<option>未发货</option>
</select>
<select ng-model="start">
<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="end">
<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="paixu">
<option value="">---排序---</option>
<option value="id">ID正序</option>
<option value="-id">ID倒序</option>
<option value="name">商品名正序</option>
<option value="-name">商品名倒序</option>
<option value="tell">手机号正序</option>
<option value="-tell">手机号倒序</option>
<option value="uname">用户名正序</option>
<option value="-uname">用户名倒序</option>
<option value="regDate">下单时间正序</option>
<option value="-regDate">下单时间倒序</option>
</select>
<br />
<button ng-click="deleteGoods()">批量删除</button>
<button ng-click="plfh()">批量发货</button>
<button ng-click="add=true">新增用户</button>
<table border="1px" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="quanxuan" ng-click="qx()"></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="g in goods |filter:{uname:selectUname,tell:selectTell,city:selectCity,state:selectState} | orderBy:paixu" ng-show="valueDate(g.regDate)">
<td><input type="checkbox" ng-model="g.check"></td>
<td ng-if="">{{$index}}</td>
<td>{{g.id}}</td>
<td>{{g.gname}}</td>
<td>{{g.uname}}</td>
<td>{{g.tell}}</td>
<td><span ng-hide="update">{{g.price}}</span><span ng-show="update"><input type="text" ng-model="g.price"><button ng-click="update=false">保存</button></span></td>
<td><button ng-click="g.nums=g.nums-1">-</button>{{g.nums}}<button ng-click="g.nums=g.nums+1">+</button></td>
<td>{{g.price*g.nums}}</td>
<td>{{g.city}}</td>
<td>{{g.regDate |date:"MM-dd :hh:ss"}}</td>
<td><button ng-click="g.state='已发货'">{{g.state}}</button></td>
<td>
<button ng-click="delete($index)">删除</button>
<button ng-click="update=true">修改</button>
</td>
</tr>
</tbody>
</table>
<div ng-show="add">
<input type="text" placeholder="请输入ID" ng-model="add_id"/><span ng-show="s1">id不能为空</span><br />
<input type="text" placeholder="请输入商品名" ng-model="add_gname"/><span ng-show="s2">gname不能为空</span><br />
<input type="text" placeholder="请输入用户名" ng-model="add_uname"/><span ng-show="s3">unam不能为空</span><br />
<input type="text" placeholder="请输入手机号" ng-model="add_tell"/><span ng-show="s4">tell不能为空</span><br />
<input type="text" placeholder="请输入价格" ng-model="add_price"/><span ng-show="s5">price不能为空</span><br />
<input placeholder="请输入数量" ng-model="add_nums"/><span ng-show="s6">数量不能为空</span><br />
<select ng-model="add_city">
<option value="">---请选择</option>
<option>山西</option>
<option>河南</option>
<option>河北</option>
<option>东北</option>
</select><span ng-show="s7">城市不能为空</span><br>
<input type="date" placeholder="请输入下单日期" ng-model="add_regDate"/><span ng-show="s8">日期不能为空</span><br>
<select ng-model="add_state">
<option value="">--请选择</option>
<option>已发货</option>
<option>未发货</option>
</select><span ng-show="s9">状态不能为空</span><br>
<button ng-click="save()">保存</button>
</div>
</center>
总价格：<span ng-bind="zj() | currency:'￥'"></span>
</body>
</html>