<title></title>
<title>商品订单(增删改查):新增订单;批量删除,发货;模糊查询,下拉菜单内容过滤(含时间);全选反选,列名排序</title>
<style type="text/css">
.first{
background-color: #007aff;
}
/* 表格奇数行变 中绿 色 */
tbody tr:nth-child(odd){
background-color: #00FA9A;
}
/* 表格偶数行变 弱绿 色 */
tbody tr:nth-child(even){
background-color: #98FB98;
}
.li{
background-color:#FEB6C1;
font-size: 15px;
color:#93212E;
}
.inputErrorColor{
border:1px solid #ff3b30;
}
.inputSuccessColor{
border:1px solid black;
}
</style>
<link rel="stylesheet" href="../ionic/css/ionic.css" />
<script type="text/javascript" src="../ionic/js/ionic.bundle.min.js" ></script>
<script type="text/javascript" src="../jQuery/jquery-2.1.1.js" ></script>
<script>
<script type="text/javascript">
$(function () {
/* 表格第一行变 天蓝 色 */
$("thead tr").addClass("first");
});
</script>
<script src="../js/angular.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.Products = [
{id:1,goodsName:"IPhone5S",userName:"果果",tel:13112332100,price:4999,city:"北京",time:"08-01 10:00",goodsState:"发货",state:false},
{id:2,goodsName:"小米6",userName:"米粉",tel:15222991111,price:2999,city:"深圳",time:"08-02 10:00",goodsState:"发货",state:false},
{id:3,goodsName:"华为P9",userName:"华仔",tel:13678953456,price:3999,city:"上海",time:"09-03 10:00",goodsState:"已发货",state:false},
{id:4,goodsName:"OPPO R11",userName:"欧弟",tel:18631090582,price:4998,city:"天津",time:"09-04 10:00",goodsState:"已收货",state:false},
{id:5,goodsName:"VIVO",userName:"朵唯",tel:15810266912,price:2998,city:"重庆",time:"10-04 10:00",goodsState:"发货",state:false}
];
//1. 选择城市
$scope.selectCity = "选择城市";
$scope.CityTest = function (city,selectCity) {
if(selectCity == "选择城市"){
return true;
}else {
if(city == selectCity){
return true;
}else {
return false;
}
}
}
//2. 选择状态查询:待发货、已发货、已收货
$scope.selectState = "选择状态";
$scope.StateTest = function (state,selectState) {
if(selectState == "选择状态"){
return true;
}else {
if(state == selectState){
return true;
}else {
return false;
}
}
}
// 3. 选择“开始月份”:01~12 “结束月份”:01~12,查询开始月份和结束月份之间的订单
$scope.startMonth = "开始月份";
$scope.endMonth = "结束月份";
$scope.filterMonth = function (index) {
//获得开始和结束的时间月份
var time = $scope.Products[index].time;
var month = parseInt(time.split("-")[0]);
if($scope.startMonth == "开始月份" || $scope.endMonth == "结束月份"){
return true;
}else {
var startTime = parseInt($scope.startMonth);
var endTime = parseInt($scope.endMonth);
//当选择的月份时间在开始和结束的月份之间时,就返回内容
if(month >= startTime && month <= endTime){
return true;
}else {
return false;
}
}
}
// 4. 开始复选框绑定的值默认是全不选
$scope.checkedAll = false;
var a=0;
//正着全选
$scope.selectAll =function(){
if($scope.checkedAll){
for(var i=0;i<$scope.Products.length;i++){
$scope.Products[i].state = true;
a++;
}
}else{
for(var i=0;i<$scope.Products.length;i++){
$scope.Products[i].state = false;
a--;
}
}
};
//反着全选
$scope.selectOne = function(index){
if($scope.Products[index].state){
a++;
}else{
a--;
}
if(a==$scope.Products.length){
//如果小按钮全部选中了,就让大的全选按钮也选中
$scope.checkedAll = true;
}else{
$scope.checkedAll = false;
}
};
//批量发货点击事件
$scope.plFahuo = function(){
if(a==0){
alert("请选择要批量发货的商品!");
}else{
if(confirm("您是否确定要批量发货选中商品?")){
for(var i=0;i<$scope.Products.length;i++){
if($scope.Products[i].state){
$scope.Products[i].goodsState = "已发货";
$scope.Products[i].state = false;
a--;
}
}
$scope.checkedAll = false;
}
}
};
//批量删除点击事件
$scope.delSelect = function(){
if(a==0){
alert("请选择要批量删除的商品!");
}else{
if(confirm("您是否确定要批量删除选中商品?")) {
for (var i = 0; i < $scope.Products.length; i++) {
if ($scope.Products[i].state) {
$scope.Products.splice(i, 1);
i--;//会出现下标越界,所以i--
a--;
}
}
$scope.checkedAll = false;
}
}
};
/* 5. 使用AngularJS过滤器orderBy对商品进行排序:具体是点击每一列标题名字时,产品进行正序倒序排列。*/
$scope.sortFlag = "-"; //正序标识符
$scope.sortName = "name"; //根据商品名称倒序排序
$scope.sortProducts = function (columnName) {
$scope.sortName = columnName;
if($scope.sortFlag == "-"){
$scope.sortFlag = "";
}else {
$scope.sortFlag = "-";
}
};
// 6. 点击“发货”按钮,将“待发货”状态改成“已发货”
$scope.changeState = function (index) {
$scope.Products[index].goodsState = "已发货";
}
$scope.showTable = false;
// 7、点击“新增订单”,弹出 新增信息表,新增订单状态都是“待发货”
$scope.addGoods = function () {
$scope.showTable = true; //弹出 新增信息表
//输入框的样式
$scope.goodsNameClass = "";
$scope.userNameClass = "";
$scope.telClass = "";
$scope.goodsName = "";
$scope.userName = "";
$scope.tel = "";
$scope.city = "选择城市";
$scope.state = false;
$scope.flag1 = false; //标志位
$scope.flag2 = false; //标志位
$scope.flag3 = false; //标志位
$scope.flag4 = false; //标志位
$scope.flag5 = false; //标志位
$scope.flag6 = false; //标志位
$scope.flag7 = false; //标志位
$scope.sub = function () {
//(1)判断商品名是否为空
if($scope.goodsName == null || $scope.goodsName == ""){
$scope.flag1 = true;
$scope.goodsNameClass = "inputErrorColor";
}else {
$scope.flag1 = false;
$scope.goodsNameClass = "inputSuccessColor";
//判断商品名是否符合格式 6-20个字符
if($scope.goodsName.length < 6 || $scope.goodsName.length > 20){
$scope.flag2 = true;
$scope.goodsNameClass = "inputErrorColor";
}else {
$scope.flag2 = false;
$scope.goodsNameClass = "inputSuccessColor";
}
}
//(2)判断用户名是否为空
if($scope.userName == null || $scope.userName == ""){
$scope.flag3 = true;
$scope.userNameClass = "inputErrorColor";
}else {
$scope.flag3 = false;
$scope.userNameClass = "inputSuccessColor";
//判断用户名是否符合格式 4-16个字符
if($scope.userName.length < 4 || $scope.userName.length > 16){
$scope.flag4 = true;
$scope.userNameClass = "inputErrorColor";
}else {
$scope.flag4 = false;
$scope.userNameClass = "inputSuccessColor";
}
}
//(3)判断手机号是否为空
if($scope.tel == null || $scope.tel == ""){
$scope.flag5 = true;
$scope.telClass = "inputErrorColor";
}else {
$scope.flag5 = false;
$scope.telClass = "inputSuccessColor";
//判断手机号是否符合格式
if($scope.tel.length == 11){
//判断手机号是否为数字
if(isNaN($scope.tel)){
$scope.flag6 = true;
$scope.telClass = "inputErrorColor";
}else {
$scope.flag6 = false;
$scope.telClass = "inputSuccessColor";
}
}else {
$scope.flag6 = true;
$scope.telClass = "inputErrorColor";
}
}
//(4)选择城市
if($scope.city == "选择城市"){
$scope.flag7 = true;
}else {
$scope.flag7 = false;
}
//满足条件后添加商品
if($scope.flag1 != true && $scope.flag2 != true && $scope.flag3 != true && $scope.flag4 != true && $scope.flag5 != true && $scope.flag6 != true && $scope.flag7 != true ){
//全显示,格式全不正确,才能进来
//遍历数据源,拿到商品id
var goodsID = 0;
for(index in $scope.Products){
if($scope.Products[index].id > goodsID){
goodsID = $scope.Products[index].id;
}
}
alert("添加成功!");
//添加发货时间
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minute = date.getMinutes();
var newTime = month+"-"+day+" "+hours+":"+minute;
var newGood = {
id:goodsID+1,
goodsName:$scope.goodsName,
userName:$scope.userName,
tel:$scope.tel,
price:3668.00,
city:$scope.city,
time:newTime,
goodsState:"发货",
state:false
};
//添加新数据
$scope.Products.push(newGood);
$scope.showTable = false;
}else {
//提交订单时,检查表单,提示错误内容,并且将文本框颜色变红色
$("ul").addClass("li");
}
}
}
$scope.sc = function(index){
$scope.Products.splice(index,1);
};
});
</script>
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品订单信息表</h3>
<div>
<input placeholder="用户名搜索" ng-model="searchName">
<input placeholder="手机号搜索" ng-model="searchTel">
<select ng-model="selectCity">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>天津</option>
<option>深圳</option>
</select>
<select ng-model="selectState">
<option>选择状态</option>
<option>发货</option>
<option>已发货</option>
<option>已收货</option>
</select>
<select ng-model="startMonth">
<option>开始月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select> -
<select ng-model="endMonth">
<option>结束月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div><br>
<button ng-click="addGoods()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 192px;">新增订单</button>
<button ng-click="plFahuo()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 18px;">批量发货</button>
<button ng-click="delSelect()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 18px;">批量删除订单</button><br><br>
<table align="center" border="1 solid #777777" cellspacing="0" cellpadding="18">
<thead>
<tr>
<th><input type="checkbox" ng-model="checkedAll" ng-click="selectAll()"></th>
<th>ID
<!--根据商品列名 ID 排序的点击事件-->
<button ng-click="sortProducts('id')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格
<!--根据商品列名 价格 排序的点击事件-->
<button ng-click="sortProducts('price')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
</th>
<th>城市</th>
<th>下单时间
<!--根据商品列名 下单时间 排序的点击事件-->
<button ng-click="sortProducts('time')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody align="center" >
<!--先遍历出商品数据,再过滤子元素,实现模糊查询功能,最后根据列头标题实现排序 注意:需要使用多个ng-show指令时可以用 && 连接在一起,如下 -->
<tr ng-repeat="goods in Products | filter:searchName | filter:searchTel | orderBy:(sortFlag+sortName)" ng-if="CityTest(goods.city,selectCity)" ng-show="StateTest(goods.goodsState,selectState) && filterMonth($index) ">
<th><input type="checkbox" ng-model="goods.state" ng-click="selectOne($index)"></th>
<td>{{goods.id}}</td>
<td>{{goods.goodsName}}</td>
<td>{{goods.userName}}</td>
<td>{{goods.tel}}</td>
<td>¥{{goods.price.toFixed(2)}}</td>
<td>{{goods.city}}</td>
<td>{{goods.time}}</td>
<td>
<span ng-if="goods.goodsState == '发货'">
<a ng-click="changeState($index)" href="#">{{goods.goodsState}}</a>
</span>
<span ng-if="goods.goodsState == '已发货'">{{goods.goodsState}}</span>
<span ng-if="goods.goodsState == '已收货'">{{goods.goodsState}}</span>
</td>
<td><button ng-click="sc($index)">删除</button></td>
</tr>
</tbody>
</table>
<!-- 比如 ng-show=“show”指令表示为方法时,内容就加上() 就是 ng-show=“show()”;表示为变量时,就是 ng-show=“show” -->
<div ng-show="showTable">
<h4>新增订单表</h4>
<table border="1 solid #777777" cellspacing="0" cellpadding="12" >
<tr>
<td align="right" >商品名 </td>
<td align="left" >
<input ng-model="goodsName" type="text" placeholder="6-20个字符" ng-class="goodsNameClass" />
</td>
</tr>
<tr>
<td align="right">用户名 </td>
<td align="left">
<input ng-model="userName" type="text" placeholder="4-16个字符" ng-class="userNameClass" />
</td>
</tr>
<tr>
<td align="right" >手机号 </td>
<td align="left" >
<input ng-model="tel" placeholder="请输入手机号" ng-class="telClass"/>
</td>
</tr>
<tr>
<td align="right" >城市 </td>
<td align="left" >
<select ng-model="city">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>天津</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<ul>
<li ng-show="flag1">商品名不能为空!</li>
<li ng-show="flag2">商品名必须是6-20个字符!</li>
<li ng-show="flag3">用户名不能为空!</li>
<li ng-show="flag4">用户名必须是4-16个字符!</li>
<li ng-show="flag5">手机号不能为空!</li>
<li ng-show="flag6">手机号格式不正确!</li>
<li ng-show="flag7">请选择城市!</li>
</ul>
<button ng-click="sub()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">提交</button>
</td>
</tr>
</table>
</div>
</center>
</body>
<title>商品订单(增删改查):新增订单;批量删除,发货;模糊查询,下拉菜单内容过滤(含时间);全选反选,列名排序</title>
<style type="text/css">
.first{
background-color: #007aff;
}
/* 表格奇数行变 中绿 色 */
tbody tr:nth-child(odd){
background-color: #00FA9A;
}
/* 表格偶数行变 弱绿 色 */
tbody tr:nth-child(even){
background-color: #98FB98;
}
.li{
background-color:#FEB6C1;
font-size: 15px;
color:#93212E;
}
.inputErrorColor{
border:1px solid #ff3b30;
}
.inputSuccessColor{
border:1px solid black;
}
</style>
<link rel="stylesheet" href="../ionic/css/ionic.css" />
<script type="text/javascript" src="../ionic/js/ionic.bundle.min.js" ></script>
<script type="text/javascript" src="../jQuery/jquery-2.1.1.js" ></script>
<script>
<script type="text/javascript">
$(function () {
/* 表格第一行变 天蓝 色 */
$("thead tr").addClass("first");
});
</script>
<script src="../js/angular.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.Products = [
{id:1,goodsName:"IPhone5S",userName:"果果",tel:13112332100,price:4999,city:"北京",time:"08-01 10:00",goodsState:"发货",state:false},
{id:2,goodsName:"小米6",userName:"米粉",tel:15222991111,price:2999,city:"深圳",time:"08-02 10:00",goodsState:"发货",state:false},
{id:3,goodsName:"华为P9",userName:"华仔",tel:13678953456,price:3999,city:"上海",time:"09-03 10:00",goodsState:"已发货",state:false},
{id:4,goodsName:"OPPO R11",userName:"欧弟",tel:18631090582,price:4998,city:"天津",time:"09-04 10:00",goodsState:"已收货",state:false},
{id:5,goodsName:"VIVO",userName:"朵唯",tel:15810266912,price:2998,city:"重庆",time:"10-04 10:00",goodsState:"发货",state:false}
];
//1. 选择城市
$scope.selectCity = "选择城市";
$scope.CityTest = function (city,selectCity) {
if(selectCity == "选择城市"){
return true;
}else {
if(city == selectCity){
return true;
}else {
return false;
}
}
}
//2. 选择状态查询:待发货、已发货、已收货
$scope.selectState = "选择状态";
$scope.StateTest = function (state,selectState) {
if(selectState == "选择状态"){
return true;
}else {
if(state == selectState){
return true;
}else {
return false;
}
}
}
// 3. 选择“开始月份”:01~12 “结束月份”:01~12,查询开始月份和结束月份之间的订单
$scope.startMonth = "开始月份";
$scope.endMonth = "结束月份";
$scope.filterMonth = function (index) {
//获得开始和结束的时间月份
var time = $scope.Products[index].time;
var month = parseInt(time.split("-")[0]);
if($scope.startMonth == "开始月份" || $scope.endMonth == "结束月份"){
return true;
}else {
var startTime = parseInt($scope.startMonth);
var endTime = parseInt($scope.endMonth);
//当选择的月份时间在开始和结束的月份之间时,就返回内容
if(month >= startTime && month <= endTime){
return true;
}else {
return false;
}
}
}
// 4. 开始复选框绑定的值默认是全不选
$scope.checkedAll = false;
var a=0;
//正着全选
$scope.selectAll =function(){
if($scope.checkedAll){
for(var i=0;i<$scope.Products.length;i++){
$scope.Products[i].state = true;
a++;
}
}else{
for(var i=0;i<$scope.Products.length;i++){
$scope.Products[i].state = false;
a--;
}
}
};
//反着全选
$scope.selectOne = function(index){
if($scope.Products[index].state){
a++;
}else{
a--;
}
if(a==$scope.Products.length){
//如果小按钮全部选中了,就让大的全选按钮也选中
$scope.checkedAll = true;
}else{
$scope.checkedAll = false;
}
};
//批量发货点击事件
$scope.plFahuo = function(){
if(a==0){
alert("请选择要批量发货的商品!");
}else{
if(confirm("您是否确定要批量发货选中商品?")){
for(var i=0;i<$scope.Products.length;i++){
if($scope.Products[i].state){
$scope.Products[i].goodsState = "已发货";
$scope.Products[i].state = false;
a--;
}
}
$scope.checkedAll = false;
}
}
};
//批量删除点击事件
$scope.delSelect = function(){
if(a==0){
alert("请选择要批量删除的商品!");
}else{
if(confirm("您是否确定要批量删除选中商品?")) {
for (var i = 0; i < $scope.Products.length; i++) {
if ($scope.Products[i].state) {
$scope.Products.splice(i, 1);
i--;//会出现下标越界,所以i--
a--;
}
}
$scope.checkedAll = false;
}
}
};
/* 5. 使用AngularJS过滤器orderBy对商品进行排序:具体是点击每一列标题名字时,产品进行正序倒序排列。*/
$scope.sortFlag = "-"; //正序标识符
$scope.sortName = "name"; //根据商品名称倒序排序
$scope.sortProducts = function (columnName) {
$scope.sortName = columnName;
if($scope.sortFlag == "-"){
$scope.sortFlag = "";
}else {
$scope.sortFlag = "-";
}
};
// 6. 点击“发货”按钮,将“待发货”状态改成“已发货”
$scope.changeState = function (index) {
$scope.Products[index].goodsState = "已发货";
}
$scope.showTable = false;
// 7、点击“新增订单”,弹出 新增信息表,新增订单状态都是“待发货”
$scope.addGoods = function () {
$scope.showTable = true; //弹出 新增信息表
//输入框的样式
$scope.goodsNameClass = "";
$scope.userNameClass = "";
$scope.telClass = "";
$scope.goodsName = "";
$scope.userName = "";
$scope.tel = "";
$scope.city = "选择城市";
$scope.state = false;
$scope.flag1 = false; //标志位
$scope.flag2 = false; //标志位
$scope.flag3 = false; //标志位
$scope.flag4 = false; //标志位
$scope.flag5 = false; //标志位
$scope.flag6 = false; //标志位
$scope.flag7 = false; //标志位
$scope.sub = function () {
//(1)判断商品名是否为空
if($scope.goodsName == null || $scope.goodsName == ""){
$scope.flag1 = true;
$scope.goodsNameClass = "inputErrorColor";
}else {
$scope.flag1 = false;
$scope.goodsNameClass = "inputSuccessColor";
//判断商品名是否符合格式 6-20个字符
if($scope.goodsName.length < 6 || $scope.goodsName.length > 20){
$scope.flag2 = true;
$scope.goodsNameClass = "inputErrorColor";
}else {
$scope.flag2 = false;
$scope.goodsNameClass = "inputSuccessColor";
}
}
//(2)判断用户名是否为空
if($scope.userName == null || $scope.userName == ""){
$scope.flag3 = true;
$scope.userNameClass = "inputErrorColor";
}else {
$scope.flag3 = false;
$scope.userNameClass = "inputSuccessColor";
//判断用户名是否符合格式 4-16个字符
if($scope.userName.length < 4 || $scope.userName.length > 16){
$scope.flag4 = true;
$scope.userNameClass = "inputErrorColor";
}else {
$scope.flag4 = false;
$scope.userNameClass = "inputSuccessColor";
}
}
//(3)判断手机号是否为空
if($scope.tel == null || $scope.tel == ""){
$scope.flag5 = true;
$scope.telClass = "inputErrorColor";
}else {
$scope.flag5 = false;
$scope.telClass = "inputSuccessColor";
//判断手机号是否符合格式
if($scope.tel.length == 11){
//判断手机号是否为数字
if(isNaN($scope.tel)){
$scope.flag6 = true;
$scope.telClass = "inputErrorColor";
}else {
$scope.flag6 = false;
$scope.telClass = "inputSuccessColor";
}
}else {
$scope.flag6 = true;
$scope.telClass = "inputErrorColor";
}
}
//(4)选择城市
if($scope.city == "选择城市"){
$scope.flag7 = true;
}else {
$scope.flag7 = false;
}
//满足条件后添加商品
if($scope.flag1 != true && $scope.flag2 != true && $scope.flag3 != true && $scope.flag4 != true && $scope.flag5 != true && $scope.flag6 != true && $scope.flag7 != true ){
//全显示,格式全不正确,才能进来
//遍历数据源,拿到商品id
var goodsID = 0;
for(index in $scope.Products){
if($scope.Products[index].id > goodsID){
goodsID = $scope.Products[index].id;
}
}
alert("添加成功!");
//添加发货时间
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minute = date.getMinutes();
var newTime = month+"-"+day+" "+hours+":"+minute;
var newGood = {
id:goodsID+1,
goodsName:$scope.goodsName,
userName:$scope.userName,
tel:$scope.tel,
price:3668.00,
city:$scope.city,
time:newTime,
goodsState:"发货",
state:false
};
//添加新数据
$scope.Products.push(newGood);
$scope.showTable = false;
}else {
//提交订单时,检查表单,提示错误内容,并且将文本框颜色变红色
$("ul").addClass("li");
}
}
}
$scope.sc = function(index){
$scope.Products.splice(index,1);
};
});
</script>
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品订单信息表</h3>
<div>
<input placeholder="用户名搜索" ng-model="searchName">
<input placeholder="手机号搜索" ng-model="searchTel">
<select ng-model="selectCity">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>天津</option>
<option>深圳</option>
</select>
<select ng-model="selectState">
<option>选择状态</option>
<option>发货</option>
<option>已发货</option>
<option>已收货</option>
</select>
<select ng-model="startMonth">
<option>开始月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select> -
<select ng-model="endMonth">
<option>结束月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div><br>
<button ng-click="addGoods()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 192px;">新增订单</button>
<button ng-click="plFahuo()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 18px;">批量发货</button>
<button ng-click="delSelect()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 18px;">批量删除订单</button><br><br>
<table align="center" border="1 solid #777777" cellspacing="0" cellpadding="18">
<thead>
<tr>
<th><input type="checkbox" ng-model="checkedAll" ng-click="selectAll()"></th>
<th>ID
<!--根据商品列名 ID 排序的点击事件-->
<button ng-click="sortProducts('id')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格
<!--根据商品列名 价格 排序的点击事件-->
<button ng-click="sortProducts('price')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
</th>
<th>城市</th>
<th>下单时间
<!--根据商品列名 下单时间 排序的点击事件-->
<button ng-click="sortProducts('time')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button>
</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody align="center" >
<!--先遍历出商品数据,再过滤子元素,实现模糊查询功能,最后根据列头标题实现排序 注意:需要使用多个ng-show指令时可以用 && 连接在一起,如下 -->
<tr ng-repeat="goods in Products | filter:searchName | filter:searchTel | orderBy:(sortFlag+sortName)" ng-if="CityTest(goods.city,selectCity)" ng-show="StateTest(goods.goodsState,selectState) && filterMonth($index) ">
<th><input type="checkbox" ng-model="goods.state" ng-click="selectOne($index)"></th>
<td>{{goods.id}}</td>
<td>{{goods.goodsName}}</td>
<td>{{goods.userName}}</td>
<td>{{goods.tel}}</td>
<td>¥{{goods.price.toFixed(2)}}</td>
<td>{{goods.city}}</td>
<td>{{goods.time}}</td>
<td>
<span ng-if="goods.goodsState == '发货'">
<a ng-click="changeState($index)" href="#">{{goods.goodsState}}</a>
</span>
<span ng-if="goods.goodsState == '已发货'">{{goods.goodsState}}</span>
<span ng-if="goods.goodsState == '已收货'">{{goods.goodsState}}</span>
</td>
<td><button ng-click="sc($index)">删除</button></td>
</tr>
</tbody>
</table>
<!-- 比如 ng-show=“show”指令表示为方法时,内容就加上() 就是 ng-show=“show()”;表示为变量时,就是 ng-show=“show” -->
<div ng-show="showTable">
<h4>新增订单表</h4>
<table border="1 solid #777777" cellspacing="0" cellpadding="12" >
<tr>
<td align="right" >商品名 </td>
<td align="left" >
<input ng-model="goodsName" type="text" placeholder="6-20个字符" ng-class="goodsNameClass" />
</td>
</tr>
<tr>
<td align="right">用户名 </td>
<td align="left">
<input ng-model="userName" type="text" placeholder="4-16个字符" ng-class="userNameClass" />
</td>
</tr>
<tr>
<td align="right" >手机号 </td>
<td align="left" >
<input ng-model="tel" placeholder="请输入手机号" ng-class="telClass"/>
</td>
</tr>
<tr>
<td align="right" >城市 </td>
<td align="left" >
<select ng-model="city">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>天津</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<ul>
<li ng-show="flag1">商品名不能为空!</li>
<li ng-show="flag2">商品名必须是6-20个字符!</li>
<li ng-show="flag3">用户名不能为空!</li>
<li ng-show="flag4">用户名必须是4-16个字符!</li>
<li ng-show="flag5">手机号不能为空!</li>
<li ng-show="flag6">手机号格式不正确!</li>
<li ng-show="flag7">请选择城市!</li>
</ul>
<button ng-click="sub()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">提交</button>
</td>
</tr>
</table>
</div>
</center>
</body>