<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.true{
background: chartreuse;
}
.false{
background: yellow;
}
</style>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
var v=angular.module("myApp",[]);
v.controller("mycont",function($scope){
var arr=[{
"cb":false,
"gid":"1024",
"name":"iphoneX",
"user":"张丽",
"tel":"17600000123",
"price":"8699",
"city":"北京",
"time":"1234343543",
"zt":false
},
{
"cb":false,
"gid":"2369",
"name":"华为P10",
"user":"小明",
"tel":"17634535435",
"price":"4999",
"city":"上海",
"time":"7876654234",
"zt":false
},
{
"cb":false,
"gid":"1435",
"name":"小米6",
"user":"小王",
"tel":"17600000123",
"price":"3999",
"city":"南京",
"time":"6765454453",
"zt":false
},
{
"cb":false,
"gid":"1024",
"name":"三星",
"user":"小二",
"tel":"17600000123",
"price":"6999",
"city":"上海",
"time":"2354654654",
"zt":false
}
];
$scope.goods=arr;
$scope.fahuo=function($index){
$scope.goods[$index].zt=true;
}
$scope.name_cha=function($event){
var temp=[];
var key=$event.keyCode;
if(key==13){
for(var i=0;i<arr.length;i++){
if(arr[i].name.indexOf($scope.name)!=-1){
temp.push(arr[i]);
}
}
$scope.goods=temp;
}
}
$scope.tel_cha=function($event){
var temp=[];
var key=$event.keyCode;
if(key==13){
for(var i=0;i<arr.length;i++){
if(arr[i].tel.indexOf($scope.tel)!=-1){
temp.push(arr[i]);
}
}
$scope.goods=temp;
}
}
var id_falg=true;
$scope.id_paixu=function(){
if(id_falg){
arr.sort(function(a,b){
return a.gid-b.gid
});
}else{
arr.sort(function(a,b){
return b.gid-a.gid
});
}
id_falg=!id_falg;
$scope.goods = arr;
}
var price_falg=true;
$scope.price_paixu=function(){
if(price_falg){
arr.sort(function(a,b){
return a.price-b.price
});
}else{
arr.sort(function(a,b){
return b.price-a.price
});
}
price_falg=!price_falg;
$scope.goods=arr;
}
var time_falg=true;
$scope.time_paixu=function(){
if(time_falg){
arr.sort(function(a,b){
return a.time-b.time;
})
}else{
arr.sort(function(a,b){
return b.time-a.time;
})
}
time_falg=!time_falg;
$scope.goods=arr;
}
$scope.isFahuo=function(fahuo1){
var temp=[];
var f=$scope.fahuo1;
if(f=="已发货"){
for(var i=0;i<arr.length;i++){
var f1=arr[i].zt;
if(f1){
temp.push(arr[i]);
}
}
}else{
for(var i=0;i<arr.length;i++){
var f1=arr[i].zt;
if(f1==false){
temp.push(arr[i]);
}
}
}
$scope.goods=temp;
}
$scope.tianjia=function(){
var n=$scope.gname;
if(n==undefined){
$scope.s1="商品名不能为空";
return;
}else{
$scope.s1="";
}
var u=$scope.guser;
if(u==undefined){
$scope.s2="用户名不能为空";
return;
}else{
$scope.s2="";
}
var good={
"name":$scope.gname,
"user":$scope.guser,
"tel":$scope.gtel,
"price":$scope.gprice,
"city":$scope.gcity,
"time":new Date().getTime(),
"zt":false
}
$scope.goods.push(good);
$scope.bb=false;
}
$scope.qx=function(){
$scope.checked=!$scope.checked;
for (var i = 0; i < arr.length; i++) {
arr[i].cb=!arr[i].cb;
}
}
$scope.pil=function(){
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].cb==true&&$scope.goods[i].zt==true){
$scope.goods.splice(i,1);
i--;
}
}
}
})
v.filter("myFilter",function(){
return function(input){
if(input){
return"已发货";
}else{
return"未发货";
}
return input;
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="mycont">
<button ng-click="bb=true">新增订单</button>
<button ng-click="pil()">批量删除</button>
<input type="text" placeholder="按商品名称查询" ng-keydown="name_cha($event)" ng-model="name" />
<input type="text" placeholder="按手机号查询" ng-keydown="tel_cha($event)" ng-model="tel" />
<select ng-change="isFahuo()" ng-model="fahuo1" ng-init="fahuo1='--按状态查询--'">
<option>已发货</option>
<option>未发货</option>
</select>
<table border="1px" cellspacing="0px">
<thead>
<tr>
<td><input type="checkbox" ng-checked="checked" ng-click="qx()" /></td>
<td>id<button ng-click="id_paixu()">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="price_paixu()">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="time_paixu()">排序</button></td>
<td>状态</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in goods">
<td><input type="checkbox" ng-checked="checked" ng-click="qx1()"/></td>
<td>{{g.gid}}</td>
<td>{{g.name}}</td>
<td>{{g.user}}</td>
<td>{{g.tel}}</td>
<td>{{g.price|currency:"¥:"}}</td>
<td>{{g.city}}</td>
<td>{{g.time|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td><input type="button" value="{{g.zt|myFilter}}" ng-click="fahuo($index)" class="{{g.zt}}" /></td>
</tr>
</tbody>
</table>
<fieldset ng-show="bb">
<legend>添加信息</legend>
<table>
<tr>
<td>商品名</td>
<td><input type="text" ng-model="gname"/></td>
<td><span>{{s1}}</span></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" ng-model="guser"/></td>
<td><span>{{s2}}</span></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" ng-model="gtel"/></td>
<td><span></span></td>
</tr>
<tr>
<td>价格为</td>
<td><input type="text" ng-model="gprice"/></td>
<td><span></span></td>
</tr>
<tr>
<td>城市</td>
<td>
<select ng-model="gcity">
<option>石家庄</option>
<option>杭州</option>
<option>苏州</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td rowspan="3"><button ng-click="tianjia()">添加</button></td>
</tr>
</table>
</fieldset>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.true{
background: chartreuse;
}
.false{
background: yellow;
}
</style>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
var v=angular.module("myApp",[]);
v.controller("mycont",function($scope){
var arr=[{
"cb":false,
"gid":"1024",
"name":"iphoneX",
"user":"张丽",
"tel":"17600000123",
"price":"8699",
"city":"北京",
"time":"1234343543",
"zt":false
},
{
"cb":false,
"gid":"2369",
"name":"华为P10",
"user":"小明",
"tel":"17634535435",
"price":"4999",
"city":"上海",
"time":"7876654234",
"zt":false
},
{
"cb":false,
"gid":"1435",
"name":"小米6",
"user":"小王",
"tel":"17600000123",
"price":"3999",
"city":"南京",
"time":"6765454453",
"zt":false
},
{
"cb":false,
"gid":"1024",
"name":"三星",
"user":"小二",
"tel":"17600000123",
"price":"6999",
"city":"上海",
"time":"2354654654",
"zt":false
}
];
$scope.goods=arr;
$scope.fahuo=function($index){
$scope.goods[$index].zt=true;
}
$scope.name_cha=function($event){
var temp=[];
var key=$event.keyCode;
if(key==13){
for(var i=0;i<arr.length;i++){
if(arr[i].name.indexOf($scope.name)!=-1){
temp.push(arr[i]);
}
}
$scope.goods=temp;
}
}
$scope.tel_cha=function($event){
var temp=[];
var key=$event.keyCode;
if(key==13){
for(var i=0;i<arr.length;i++){
if(arr[i].tel.indexOf($scope.tel)!=-1){
temp.push(arr[i]);
}
}
$scope.goods=temp;
}
}
var id_falg=true;
$scope.id_paixu=function(){
if(id_falg){
arr.sort(function(a,b){
return a.gid-b.gid
});
}else{
arr.sort(function(a,b){
return b.gid-a.gid
});
}
id_falg=!id_falg;
$scope.goods = arr;
}
var price_falg=true;
$scope.price_paixu=function(){
if(price_falg){
arr.sort(function(a,b){
return a.price-b.price
});
}else{
arr.sort(function(a,b){
return b.price-a.price
});
}
price_falg=!price_falg;
$scope.goods=arr;
}
var time_falg=true;
$scope.time_paixu=function(){
if(time_falg){
arr.sort(function(a,b){
return a.time-b.time;
})
}else{
arr.sort(function(a,b){
return b.time-a.time;
})
}
time_falg=!time_falg;
$scope.goods=arr;
}
$scope.isFahuo=function(fahuo1){
var temp=[];
var f=$scope.fahuo1;
if(f=="已发货"){
for(var i=0;i<arr.length;i++){
var f1=arr[i].zt;
if(f1){
temp.push(arr[i]);
}
}
}else{
for(var i=0;i<arr.length;i++){
var f1=arr[i].zt;
if(f1==false){
temp.push(arr[i]);
}
}
}
$scope.goods=temp;
}
$scope.tianjia=function(){
var n=$scope.gname;
if(n==undefined){
$scope.s1="商品名不能为空";
return;
}else{
$scope.s1="";
}
var u=$scope.guser;
if(u==undefined){
$scope.s2="用户名不能为空";
return;
}else{
$scope.s2="";
}
var good={
"name":$scope.gname,
"user":$scope.guser,
"tel":$scope.gtel,
"price":$scope.gprice,
"city":$scope.gcity,
"time":new Date().getTime(),
"zt":false
}
$scope.goods.push(good);
$scope.bb=false;
}
$scope.qx=function(){
$scope.checked=!$scope.checked;
for (var i = 0; i < arr.length; i++) {
arr[i].cb=!arr[i].cb;
}
}
$scope.pil=function(){
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].cb==true&&$scope.goods[i].zt==true){
$scope.goods.splice(i,1);
i--;
}
}
}
})
v.filter("myFilter",function(){
return function(input){
if(input){
return"已发货";
}else{
return"未发货";
}
return input;
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="mycont">
<button ng-click="bb=true">新增订单</button>
<button ng-click="pil()">批量删除</button>
<input type="text" placeholder="按商品名称查询" ng-keydown="name_cha($event)" ng-model="name" />
<input type="text" placeholder="按手机号查询" ng-keydown="tel_cha($event)" ng-model="tel" />
<select ng-change="isFahuo()" ng-model="fahuo1" ng-init="fahuo1='--按状态查询--'">
<option>已发货</option>
<option>未发货</option>
</select>
<table border="1px" cellspacing="0px">
<thead>
<tr>
<td><input type="checkbox" ng-checked="checked" ng-click="qx()" /></td>
<td>id<button ng-click="id_paixu()">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="price_paixu()">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="time_paixu()">排序</button></td>
<td>状态</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in goods">
<td><input type="checkbox" ng-checked="checked" ng-click="qx1()"/></td>
<td>{{g.gid}}</td>
<td>{{g.name}}</td>
<td>{{g.user}}</td>
<td>{{g.tel}}</td>
<td>{{g.price|currency:"¥:"}}</td>
<td>{{g.city}}</td>
<td>{{g.time|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td><input type="button" value="{{g.zt|myFilter}}" ng-click="fahuo($index)" class="{{g.zt}}" /></td>
</tr>
</tbody>
</table>
<fieldset ng-show="bb">
<legend>添加信息</legend>
<table>
<tr>
<td>商品名</td>
<td><input type="text" ng-model="gname"/></td>
<td><span>{{s1}}</span></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" ng-model="guser"/></td>
<td><span>{{s2}}</span></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" ng-model="gtel"/></td>
<td><span></span></td>
</tr>
<tr>
<td>价格为</td>
<td><input type="text" ng-model="gprice"/></td>
<td><span></span></td>
</tr>
<tr>
<td>城市</td>
<td>
<select ng-model="gcity">
<option>石家庄</option>
<option>杭州</option>
<option>苏州</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td rowspan="3"><button ng-click="tianjia()">添加</button></td>
</tr>
</table>
</fieldset>
</body>
</html>