各种查询排序

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/jquery-1.11.0.min.js"></script>
<script src="../libs/angular.min.js"></script>
<style>
#div1 {
width: 800px;
height: 50PX;
background: yellow;
}

input {
margin-top: 10px;
}

table {
margin-top: 20px;
width: 800px;
height: 50PX;
text-align: center;
}

.inp1 {
background: #5CD6FF;
}

.true {
background: greenyellow;
}

.false {
background: yellow;
}

.div2 {
width: 800px;
border: 1px solid black;
}
/*隔行换色*/

tr:nth-of-type(odd) {
background: white;
}
/*隔行换色*/

tr:nth-of-type(even) {
background: #EEEEEE;
}
/*处焦换色*/

tr:nth-of-type(odd):hover {
background: blue;
}
/*处焦换色*/

tr:nth-of-type(even):hover {
background: blue;
}
</style>


</head>
<body ng-app="myapp" ng-controller="mycontroller">
<div id="div1">
<input type="button" value="新增订单" ng-click="xx1()" />
<input type="button" value="批量删除" style="margin-left: 20px;" ng-click="dele($index)" />
<input type="text" placeholder="按商品名查询" style="margin-left: 20px;" ng-keydown="huiche($event)" ng-model="name_s" />
<input type="text" placeholder="按手机号名查询" style="margin-left: 20px;" ng-keydown="huiche2($event)" ng-model="tell_s" />
<select ng-change="isFaHuo()" ng-model="fahuo" ng-init="fahuo='--按状态查询--'">
<option>--按状态查询--</option>
<option>已发货</option>
<option>未发货</option>
</select>
</div>
<table border="1px" cellspacing="0" cellpadding="0">


<tr style="background: grey;">
<td><input type="checkbox" /></td>
<td>id<input type="button" value="排序" class="inp1" ng-click="id_px()" /></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<input type="button" value="排序" class="inp1" ng-click="price_px()" /></td>
<td>城市</td>
<td>下单日期 <input type="button" value="排序" class="inp1" ng-click="date_px()" /></td>
<td>状态</td>
</tr>


<tr ng-repeat="good in goods">
<td><input type="checkbox" ng-click="shifou($index)" /></td>
<td>{{good.id}}</td>
<td>{{good.gname}}</td>
<td>{{good.user}}</td>
<td>{{good.tel}}</td>
<td>{{good.price|currency:"￥："}}</td>
<td>{{good.city}}</td>
<td>{{good.time|date:"yyyy-MM-dd HH-mm-ss"}}</td>
<td><input type="button" value="{{good.state|myfilter}}" class="{{good.state}}" ng-click="fahuo1($index)" /></td>
</tr>
</table>
 
<fieldset class="div2" style="margin-top: 50px;" ng-show="show1">
<center>
 <h1>新增订单</h1>
 </center>
<legend>添加订单信息</legend>
<center>

商品名：<input type="text" id="s1" ng-model="shapp2" />
<span id="sp1"></span>
</br>
用户名：<input type="text" id="n1" ng-model="name2" />
<span id="sp2"></span>
</br>
手机号：<input type="text" id="t1" ng-model="tell1" />
<span id="sp3"></span>
</br>
价格为：<input type="text" id="p1" ng-model="price1" />
<span id="sp4"></span>
</br>
城&nbsp;&nbsp;&nbsp;市&nbsp;:
<select ng-change="changsi()" id="c1" ng-model="cs1" ng-init="cs1='--按状态查询--'" style="width: 180px;">
<option>--按状态查询--</option>
<option>河南</option>
<option>河北</option>
<option>山西</option>
</select>
<span id="sp5"></span>


</br>


<input type="button" value="保存" ng-click="bz()" />
</center>
</fieldset>
<script type="text/javascript">
var mo = angular.module("myapp", []);
mo.controller("mycontroller", function($scope) {


//初始数据


var arr = [{
"id": 2001,
"isChecked": false,
"gname": "iphoneX",
"user": "张三",
"tel": 12345678998,
"price": 8699.00,
"city": "北京",
"time": new Date(16666456).getTime(),
"state": false
}, {
"id": 3006,
"isChecked": false,
"gname": "iphone6",
"user": "lisi",
"tel": 132898765765,
"price": 5638.00,
"city": "郑州",
"time": new Date(1678645).getTime(),
"state": false
}, {
"id": 5312,
"isChecked": false,
"gname": "iphone7",
"user": "赵小龙",
"tel": 15072656676,
"price": 6180.00,
"city": "北京",
"time": new Date(12546546546543).getTime(),
"state": false
}, {
"id": 2132,
"isChecked": false,
"gname": "iphone8",
"user": "赵强",
"tel": 186765446788,
"price": 7190.00,
"city": "上海",
"time": new Date(167864554).getTime(),
"state": false
}];
//把数据赋给显示数组
$scope.goods = arr;
//回车查询商品名事件
$scope.huiche = function($event) {
var names_1 = []; //临时数组
var hui = $event.keyCode //获取回车事件的触发
var name = $scope.name_s; //获取输入框的值
if(hui == 13) { //回车 触发值是13
for(var i = 0; i < arr.length; i++) {
if(arr[i].gname.indexOf(name) != -1) { //循环获取数组的name值如果包含name值
names_1.push(arr[i]); //赋给我的临时数组
}
}
$scope.goods = names_1; //赋给显示数组
}


}


$scope.huiche2 = function($event) {
var tell_1 = []; //临时数组
var hui = $event.keyCode; //获取回车事件的触发
var tell = $scope.tell_s; //获取输入框的值
if(hui == 13) { //回车 触发值是13
for(var i = 0; i < arr.length; i++) { //循环获取数组的电话的值如果包含tell值
if(arr[i].tel.indexOf(tell)) {
tell_1.push(arr[i] != -1); //赋给我的临时数组
}


}
$scope.goods = tell_1; //赋给显示数组
}


}


$scope.fahuo1 = function($index) {
//状态赋值
arr[$index].state = !arr[$index].state;
}


$scope.isFaHuo = function() { //状态的下拉事件
var fh = []; //临时数组
var zt1 = $scope.fahuo; //取出状态
if(zt1 == "已发货") {
for(var i = 0; i < arr.length; i++) {
var f = arr[i].state; //取出state的值
if(f) { //等于true
fh.push(arr[i]); //赋值给临时数组
}
}
} else {
for(var i = 0; i < arr.length; i++) {
var f1 = arr[i].state; //取出state的值
if(f1 == false) { //等于false
fh.push(arr[i]); //赋值给临时数组
}
}
}


$scope.goods = fh; //赋给显示数组
//跟据状排序
//id排序
var id_flas1 = false; //标识符
$scope.id_px = function() {
//死格式
if(id_flas1 == false) {
fh.sort(function(a, b) {
return a.id - b.id
})
} else {
fh.sort(function(a, b) {
return b.id - a.id
})
}
id_flas1 = !id_flas1
}


var price_flas2 = true; //标识符
//价格排序
$scope.price_px = function() {
if(price_flas2) {
fh.sort(function(a, b) {
return a.price - b.price
})
} else {
fh.sort(function(a, b) {
return b.price - a.price
})
}
price_flas2 = !price_flas2


}


var deta_flas2 = true; //标识符
//时间排序
$scope.date_px = function() {
if(deta_flas2) {
fh.sort(function(a, b) {
return a.time - b.time
})
} else {
fh.sort(function(a, b) {
return b.time - a.time
})
}
deta_flas2 = !deta_flas2
}


}


//根据未选状态排序
var id_flas = false; //标识符
//id排序
$scope.id_px = function() {
if(id_flas == false) {
arr.sort(function(a, b) {
return a.id > b.id
})
} else {
arr.sort(function(a, b) {
return a.id < b.id
})
}
id_flas = !id_flas
}
var price_flas = false; //标识符
//价格排序
$scope.price_px = function() {
if(price_flas == false) {
arr.sort(function(a, b) {
return a.price > b.price
})
} else {
arr.sort(function(a, b) {
return a.price < b.price
})
}
price_flas = !price_flas


}
var deta_flas = false; //标识符
//时间排序
$scope.date_px = function() {
if(deta_flas == false) {
arr.sort(function(a, b) {
return a.time > b.time
})
} else {
arr.sort(function(a, b) {
return a.time < b.time
})
}
deta_flas = !deta_flas
}
//获取checked的状态值
$scope.shifou = function($index) {
$scope.goods[$index].isChecked = !$scope.goods[$index].isChecked
}
//批量删除
$scope.dele = function($index) {
for(var i = $scope.goods.length - 1; i >= 0; i--) { //循环显示数组
var ss = $scope.goods[i].state; //取出state的值
var vv = $scope.goods[i].isChecked; //取出isChecked的值
if(vv && ss) { //都为true
$scope.goods.splice(index, 1) //删除
}
}
}
//点击的新增时间
$scope.xx1 = function() {
$scope.show1 = true; //让div显示


}


$scope.bz = function() {


var sh2 = $scope.shapp2;
var flas = true;
if(sh2 == "" || sh2 == null) {


$("#s1").css({
"border": "1px solid pink"


});
$("#sp1").html("商品不能为空")


flas = false;
return
} else {
$("#s1").css({
"border": "1px solid black "
});
$("#sp1").html("")
flas = true;
}


var name2 = $scope.name2;
var flas1 = true;
if(name2 == "" || name2 == null) {


$("#n1").css({
"border": "1px solid red"
});
$("#sp2").html("用户名不能为空")
flas1 = false;
return
} else {
$("#n1").css({
"border": "1px solid black "
});


$("#sp2").html("")
flas1 = true;
}


var tell1 = $scope.tell1;


var flas2 = true;
if(tell1 == "" || tell1 == null) {


$("#t1").css({
"border": "1px solid red"
});
$("#sp3").html("手机号不能为空")
flas2 = false;
return
} else {
$("#sp3").html("")
$("#t1").css({
"border": "1px solid black "
});
flas2 = true;


}


var price1 = $scope.price1;
var flas3 = true;
if(price1 == "" || price1 == null) {


$("#p1").css({
"border": "1px solid red"
});
$("#sp4").html("价格不能为空")


flas3 = false;
return
} else {
$("#sp4").html("")
$("#p1").css({
"border": "1px solid black "
});
flas3 = true;
}


var cs1 = $scope.cs1;
var flas4 = true;
if(cs1 == "" || cs1 == null || cs1 == "--按状态查询--") {


$("#c1").css({
"border": "1px solid red"
});
$("#sp5").html("请选择城市")
flas4 = false;
return
} else {
$("#sp5").html("")
$("#c1").css({
"border": "1px solid black "
});
flas4 = true;
}


if(flas == true && flas1 == true && flas2 == true && flas3 == true && flas4 == true) {
//随机数0-9999
var aa = Math.random() * 10000;
//化为整数
var vv = Math.floor(aa);


var arr1 = {


"id": vv,
"isChecked": false,
"gname": $scope.shapp2,
"user": $scope.name2,
"tel": $scope.tell1,
"price": $scope.price1,
"city": $scope.cs1,
"time": new Date(25687548).getTime(),
"state": false
}
$scope.show1 = false;//添加成功 隐藏div
arr.push(arr1);//把对象赋给初始数据arr
$scope.goods = arr;//arr赋给显示数据
//把输入框赋为空
$scope.shapp2 = "";
$scope.name2 = "";
$scope.tell1 = "";
$scope.price1 = "";
//赋给初始属性
$scope.cs1 = "--按状态查询--";//


}


}


})
                //根据返回的数据确认state的值
mo.filter("myfilter", function() {
return function(input) {
if(input) {
return "已发货";//是true赋值为已发货
} else {
return "未发货";//是false赋值为已发货
}
return input;
}
})
</script>


</body>
</html>