<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<style>
table{
border-collapse: collapse;
}
th,td{
border: 1px solid #000000;
}
ul li{
color: red;
}
</style>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.data=[{
check:false,
name:"iPhone4",
names:"张三",
phop:12321411,
price:4999,
addr:"北京",
xiad:"08-01 10:00",
zt:"发货"
},{
check:false,
name:"小米6",
names:"李四",
phop:56478130366,
price:2999,
addr:"北京",
xiad:"08-02 10:00",
zt:"发货"
},{
check:false,
name:"华为P9",
names:"王五",
phop:68764313,
price:3999,
addr:"上海",
xiad:"09-04 10:00",
zt:"已发货"
},{
check:false,
name:"OPPO R11",
names:"赵六",
phop:346363443,
price:4999,
addr:"天津",
xiad:"09-04 10:00",
zt:"已发货"
},{
check:false,
name:"VIVO",
names:"周七",
phop:145674231,
price:2999,
addr:"重庆",
xiad:"10-04 10:00",
zt:"已发货"
}];
//根据城市查询数据
$scope.addrsize="选择城市";
$scope.addrcx=function (item) {
if($scope.addrsize!="选择城市"){
if(item.addr==$scope.addrsize){
return true;
}else{
return false;
}
}else{
return true;
}
};
//根据选择状态查询数据
$scope.ztsize="选择状态";
$scope.ztcx=function (item) {
if($scope.ztsize!="选择状态"){
if(item.zt==$scope.ztsize){
return true;
}else{
return false;
}
} else{
return true;
}
};
//敏感词
$scope.yhm="";
$scope.yhm2="";
$scope.$watch("yhm",function (value) {
if(value.indexOf("枪")!=-1){
alert("包含敏感词");
$scope.yhm="";
}else{
$scope.yhm2=$scope.yhm;
}
});
//新增订单
$scope.show=false;
$scope.xzdd=function () {
$scope.show=true;
};
//全选,全不选
$scope.checkAll=false;
$scope.qx=function () {
if($scope.checkAll==true){
for(var i=0;i<$scope.data.length;i++){
$scope.data[i].check=true;
}
}else{
for(var i=0;i<$scope.data.length;i++){
$scope.data[i].check=false;
}
}
};
//反着选
$scope.dx=function () {
var n=0;
for(var i=0;i<$scope.data.length;i++){
if($scope.data[i].check==true){
n++;
}
}
if(n==$scope.data.length){
$scope.checkAll=true;
}else{
$scope.checkAll=false;
}
};
//新增订单
$scope.addaddr="选择城市";
$scope.addname="";
$scope.addnames="";
$scope.addphop="";
$scope.shangpin=false;
$scope.weishus=false;
$scope.weishu=false;
$scope.yonghu=false;
$scope.shouji=false;
$scope.cs=false;
$scope.shoujigeshi=false;
$scope.tj=function () {
if($scope.addname==""){
$scope.shangpin=true;
}else{
if($scope.addname.length<6||$scope.addname.length>20){
$scope.shangpin=false;
$scope.weishu=true;
}else{
if($scope.addnames==""){
$scope.weishu=false;
$scope.yonghu=true;
}else{
if($scope.addnames.length<6||$scope.addnames.length>20){
$scope.yonghu=false;
$scope.weishus=true;
}else{
if($scope.addphop==""){
$scope.weishus=false;
$scope.shouji=true;
}else{
if($scope.addphop.length!=11){
$scope.shouji=false;
$scope.shoujigeshi=true;
}else{
if($scope.addaddr=="选择城市"){
$scope.shoujigeshi=false;
$scope.cs=true;
}else{
$scope.data.push({
name:$scope.addname,
names:$scope.addnames,
phop:$scope.addphop,
price:5999,
addr:$scope.addaddr,
zt:"待发货"
});
$scope.cs=false;
}
}
}
}
}
}
}
};
//发货
$scope.ztgb=function (index) {
if($scope.data[index].zt=="发货"){
$scope.data[index].zt="已发货";
}
};
//批量发货
$scope.plfh=function () {
for(var i=0;i<$scope.data.length;i++){
if($scope.data[i].check==true){
if($scope.data[i].zt=="发货"){
$scope.data[i].zt="已发货";
}
}
}
/* if(a==true){
alert("请勾选要发货的订单!!");
}*/
};
$scope.del=function () {
for(var i=0;i<$scope.data.length;i++){
if($scope.data[i].check==true){
$scope.data.splice(i,1);
i--;
}
}
};
$scope.sort=function (index) {
$scope.sor=index;
if($scope.sor==index){
$scope.serve=!$scope.serve
}
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" placeholder="用户名搜索" ng-model="yhm"><input type="text" placeholder="手机号搜索" ng-model="sjh">
<select ng-model="addrsize">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>天津</option>
</select>
<select ng-model="ztsize">
<option>选择状态</option>
<option>发货</option>
<option>待发货</option>
<option>已发货</option>
</select>
<select>
<option>开始月份</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>
<option>结束月份</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><br><br>
<button ng-click="xzdd()">新增订单</button> <button ng-click="plfh()">批量发货</button> <button ng-click="del()">批量删除</button>
<br><br>
<table>
<thead>
<tr>
<th><input type="checkbox" ng-click="qx()" ng-model="checkAll">全选</th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th ng-click="sort('price')">价格</th>
<th>城市</th>
<th ng-click="sort('xiad')">下单时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data|filter:yhm|filter:sjh|filter:addrcx|filter:ztcx|orderBy:sor:serve">
<td><input type="checkbox" ng-model="item.check" ng-click="dx()"></td>
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.names}}</td>
<td>{{item.phop}}</td>
<td>{{item.price}}</td>
<td>{{item.addr}}</td>
<td>{{item.xiad}}</td>
<td><button ng-click="ztgb($index)">{{item.zt}}</button></td>
</tr>
</tbody>
</table>
<br><br>
<table ng-show="show">
<tr>
<th colspan="2">新增订单</th>
</tr>
<tr>
<td>商品名</td>
<td><input type="text" placeholder="6-20个字符" ng-model="addname"></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="4-16个字符" ng-model="addnames"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" ng-model="addphop"></td>
</tr>
<tr>
<td>城市</td>
<td><select ng-model="addaddr">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>天津</option>
</select></td>
</tr>
<tr>
<td colspan="2">
<ul>
<li ng-show="shangpin">商品名不能为空</li>
<li ng-show="yonghu">用户名不能为空</li>
<li ng-show="shouji">手机号不能为空</li>
<li ng-show="shoujigeshi">手机号格式不对</li>
<li ng-show="weishu">必须是6到20位</li>
<li ng-show="weishus">必须是6到20位</li>
<li ng-show="cs">请选择城市</li>
</ul>
</td>
</tr>
<tr>
<th colspan="2"><button ng-click="tj()">提交</button></th>
</tr>
</table>
</body>
</html>