最后一个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/js/angular/angular.js"></script>
<script src="lib/jquery-1.11.1.js"></script>
<script>
angular.module("myapp",[])
.controller("democ",function($scope){
$scope.sp="";
$scope.te="";
$scope.zt="";
$scope.data=[
{
checked:false,
id:2001,
sname:'iphoneX',
yname:'张三',
tell:'13525565588',
price:8699,
city:'北京',
dates:'11-23 10:00:00',
state:1
},
{
checked:false,
id:3006,
sname:'iphone6',
yname:'王红',
tell:'18524565588',
price:5635,
city:'郑州',
dates:'11-23 11:38:20',
state:1
},
{
checked:false,
id:5312,
sname:'iphone7',
yname:'赵小龙',
tell:'17545585598',
price:6180,
city:'北京',
dates:'11-20 09:17:30',
state:2
}
];
//全选
$scope.ckAll=function(){
for(var i in $scope.data){
$scope.data[i].checked = $scope.ckall;
}
}
//批量删除只能删除已发货不能删除未发货
$scope.del=function(){
for(var i = 0;i<$scope.data.length;i++){
if($scope.data[i].state==1){
$scope.data.splice(i,1);
i--;
}
}
}
//添加
$scope.add=function(){
var a = $scope.a_sname;
var b = $scope.a_yname;
var c = $scope.a_tell;
var d = $scope.a_price;
var e = $scope.a_city;
if(a == undefined||a==""){
$scope.a1="商品名不能为空";
}else{
$scope.a1="";
}
if(b == undefined||b==""){
$scope.a2="用户名不能为空";
}else{
$scope.a2="";
}
if(c == undefined||c==""){
$scope.a3="手机号不能为空";
}else{
$scope.a3="";
}
if(d == undefined||d==""){
$scope.a4="价格不能为空";
}else{
$scope.a4="";
}
if(e == undefined||e==""){
$scope.a5="城市不能为空";
}else{
$scope.a5="";
}
if($scope.a1==""&&$scope.a2==""&&$scope.a3==""&&$scope.a4==""&&$scope.a5==""){
$scope.data.push(
{
id:3,
sname:a,
yname:b,
tell:c,
price:d,
city:e,
dates:new Date(),
state:2
}
);
$scope.toadd=false;
}else{
return false;
}
}
//排序
$scope.px="";
$scope.idpai=function(){
$scope.px="id";
$scope.ff=!$scope.ff;
}
$scope.pricepai=function(){
$scope.px="price";
$scope.ff=!$scope.ff;
}
$scope.datepai=function(){
$scope.px="dates";
$scope.ff=!$scope.ff;
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="democ">
<div>
<input type="button" value="新增订单" style="border: 1px solid;border-radius: 5px;background-color: deepskyblue;" ng-click="toadd=true" />
<input type="button" value="批量删除" style="border: 1px solid;border-radius: 5px;background-color: deepskyblue;" ng-click="del()" />
<input placeholder=" 按商品名称查询…" style="border-radius: 10px;border-color: black;" ng-model="sp" />
<input placeholder=" 按手机号查询…" style="border-radius: 10px;border-color: black;" ng-model="te" />
<select ng-model="zt">
<option value="">--按状态查询--</option>
<option value="1">已发货</option>
<option value="2">未发货</option>
</select>
</div>
<table border="1" cellspacing="0">
<tr>
<td><input type="checkbox" ng-model="ckall" ng-click="ckAll()" /></td>
<td>id<button ng-click="idpai()" style="background-color: deepskyblue;border: 1px solid;border-radius: 5px;">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="pricepai()" style="background-color: deepskyblue;border: 1px solid;border-radius: 5px;">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="datepai()" style="background-color: deepskyblue;border: 1px solid;border-radius: 5px;">排序</button></td>
<td>状态</td>
</tr>
<tr ng-repeat="a in data|filter:{sname:sp}|filter:{tell:te}|filter:{state:zt}|orderBy:px:ff">
<td><input type="checkbox" ng-model="a.checked" /></td>
<td>{{a.id}}</td>
<td>{{a.sname}}</td>
<td>{{a.yname}}</td>
<td>{{a.tell}}</td>
<td>{{a.price}}</td>
<td>{{a.city}}</td>
<td>{{a.dates|date:'MM-dd hh:mm:ss'}}</td>
<td>
<span ng-show="a.state==2" style="border-radius: 10px;background-color: yellow;"><a ng-click="a.state=1">未发货</a></span>
<span ng-show="a.state==1" style="border-radius: 10px;background-color: lawngreen;">已发货</span>
</td>
</tr>
</table>
<form ng-show="toadd">
商品名<input ng-model="a_sname" /><span style="border: 1px solid;border-color: red;background-color: yellow;">{{a1}}</span><br /><br />
用户名<input ng-model="a_yname" /><span style="border: 1px solid;border-color: red;background-color: yellow;">{{a2}}</span><br /><br />
手机号<input ng-model="a_tell" /><span style="border: 1px solid;border-color: red;background-color: yellow;">{{a3}}</span><br /><br />
价格为<input ng-model="a_price" /><span style="border: 1px solid;border-color: red;background-color: yellow;">{{a4}}</span><br /><br />
城市是<select ng-model="a_city">
<option value="">---选择城市---</option>
<option>北京</option>
<option>天津</option>
</select><span style="border: 1px solid;border-color: red;background-color: yellow;">{{a5}}</span><br />
<button ng-click="add()" style="background-color: beige;">保存</button>
</form>
</body>
</html>
浙公网安备 33010602011771号