angular模糊查詢和過濾修改
<!DOCTYPE html>
<html ng-app="xskapp">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa {
margin-left: 10px;
}
.bb {
margin-left: 250px;
}
tbody tr {
background: #d0d0d0;
}
tbody tr:nth-child(2n) {
background: #ffffff;
}
td {
width: 80px;
}
#tbody tr:hover {
background: red;
}
</style>
<script src="angular-1.5.5/angular.js"></script>
<script>
var app = angular.module("xskapp", []);
app.controller("dome", function($scope, $filter) {
$scope.data = [{
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
}
];
// 6. 點選“發貨”按鈕，將“待發貨”狀態改成“已發貨”
$scope.changeState = function(index) {
$scope.data[index].goodsState = "已發貨";
}
//刪除根據id刪除
$scope.del = function(aa) {
for(var i = 0; i < $scope.data.length; i++) {
if($scope.data[i].id == aa.id) {
var isDel = confirm("是否確定刪除？");
if(isDel) {
alert("刪除成功")
$scope.data.splice(i, 1);
}
}
}
}
//1. 選擇城市
$scope.selectCity = "選擇城市";
$scope.dizhi = function(city, selectCity) {
if(selectCity == "選擇城市") {
return true;
} else {
if(selectCity == city) {
return true;
} else {
return false;
}
}
}
//2.根據狀態查詢
$scope.selectState = "選擇狀態"
$scope.zhuangtai = function(state1, selectState) {
if(selectState == "選擇狀態") {
return true;
} else {
if(state1 == selectState) {
return true;
} else {
return false;
}
}
}
// 3. 選擇“開始月份”：01~12 “結束月份”：01~12，查詢開始月份和結束月份之間的訂單
$scope.startMonth = "開始月份";
$scope.endMonth = "結束月份";
$scope.shijian = function(index) {
//獲取得到開始月份和結束月份;;;;把-去掉
var time = $scope.data[index].time;
var time2 = parseInt(time.split("-")[0]);
if($scope.startMonth == "開始月份" || $scope.endMonth == "結束月份") {
return true;
} else {
var kaishi = parseInt($scope.startMonth);
var jieshu = parseInt($scope.endMonth);
if(time2 >= kaishi && jieshu >= time2) {
return true;
} else {
return false;
}
}
}
//ID排序
$scope.fun = {
xuan: function() {
var orderBy = $filter("orderBy")
if($scope.option == "+id") {
$scope.data = orderBy($scope.data, "id", false);
} else if($scope.option == "-id") {
$scope.data = orderBy($scope.data, "id", false);
} else if($scope.option == "+goodsName") {
$scope.data = orderBy($scope.data, "goodsName", false);
} else if($scope.option == "-goodsName") {
$scope.data = orderBy($scope.data, "goodsName", false);
}
}
}
// 4. 開始複選框繫結的值預設是全不選
//全選全不選
$scope.checked1 = false;
var a = 0;
//正著全選
$scope.checkedAll = function() {
if($scope.checked1) {
for(var i = 0; i < $scope.data.length; i++) {
$scope.data[i].state = true;
a++;
}
} else {
for(var i = 0; i < $scope.data.length; i++) {
$scope.data[i].state = false;
a--;
}
}
};
//反選全選
$scope.selectOne = function(index) {
if($scope.data[index].state) {
a++;
} else {
a--;
}
if(a == $scope.data.length) {
$scope.checked1 = true;
} else {
$scope.checked1 = false;
}
}
//新增資料
$scope.add = function() {
$scope.showtable = true;
$scope.goodsName = "";
$scope.userName = "";
$scope.price = "";
$scope.tel = "";
$scope.city = "選擇城市";
$scope.ok1 = false;
$scope.ok2 = false;
$scope.ok3 = false;
$scope.ok4 = false;
$scope.ok5 = false;
$scope.ok6 = false;
$scope.ok7 = false;
$scope.ok8 = false;
$scope.ok9 = false;
$scope.sub = function() {
alert(865)
if($scope.goodsName == null || $scope.goodsName == "") {
$scope.ok1 = true;
} else {
$scope.ok1 = false;
//判斷商品名是否符合格式 6-20個字元
if($scope.goodsName.length < 5 || $scope.goodsName.length > 10) {
$scope.ok2 = true;
} else {
$scope.ok2 = false;
}
}
//（2）判斷使用者名稱是否為空
if($scope.userName == null || $scope.userName == "") {
$scope.ok3 = true;
} else {
$scope.ok3 = false;
//判斷使用者名稱是否符合格式 4-16個字元
if($scope.userName.length < 3 || $scope.userName.length > 5) {
$scope.ok4 = true;
} else {
$scope.ok4 = false;
}
}
//（3）判斷手機號是否為空
if($scope.tel == null || $scope.tel == "") {
$scope.ok5 = true;
} else {
$scope.ok5 = false;
//判斷手機號是否符合格式
if($scope.tel.length == 11) {
//判斷手機號是否為數字
if(isNaN($scope.tel)) {
$scope.ok6 = true;
} else {
$scope.ok6 = false;
}
} else {
$scope.ok6 = true;
}
}
//（4）選擇城市
if($scope.city == "選擇城市") {
$scope.ok7 = true;
} else {
$scope.ok7 = false;
}
//輸入價錢
if($scope.price == null || $scope.price == "") {
$scope.ok8 = true;
} else {
$scope.ok8 = false;
//判斷商品名是否符合格式 6-20個字元
if(isNaN($scope.price)) {
$scope.ok9 = true;
} else {
$scope.ok9 = false;
}
}
if($scope.ok1 != true && $scope.ok2 != true && $scope.ok3 != true && $scope.ok4 != true && $scope.ok5 != true && $scope.ok6 != true && $scope.ok7 != true && $scope.ok8 != true && $scope.ok9 != true) {
var goodsID = 0;
for(index in $scope.data) {
if($scope.data[index].id > goodsID) {
goodsID = $scope.data[index].id;
}
}
//時間
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 datas = {
id: goodsID + 1,
goodsName: $scope.goodsName,
userName: $scope.userName,
tel: $scope.tel,
price: $scope.price,
city: $scope.city,
time: newTime,
goodsState: "發貨",
state: false
};
$scope.data.push(datas);
$scope.showtable = false;
} else {
$("ul").addClass("li");
}
}
}
//批量發貨
$scope.fhAll = function() {
var aa = false;
for(var i = 0; i < $scope.data.length; i++) {
if($scope.data[i].state == true) {
aa = true;
break;
}
}
if(aa) {
for(var i = 0; i < $scope.data.length; i++) {
if($scope.data[i].state == true) {
$scope.data[i].goodsState = "已發貨";
}
}
} else {
alert("請勾選")
}
}
//批量刪除
$scope.delAll = function() {
var aa = false;
for(var i = 0; i < $scope.data.length; i++) {
if($scope.data[i].state == true) {
aa = true;
break;
}
}
if(aa == true) {
for(var i = 0; i < $scope.data.length; i++) {
if($scope.data[i].state) {
$scope.data.splice(i, 1);
i--
}
}
} else {
alert("請勾選")
}
}
$scope.title = "state";
$scope.desc = false; //預設false升 true降
$scope.orderby = function() {
//獲取輸入框內容
var t = $scope.ordertype;
if(t == "1") {
$scope.desc = false;
} else if(t == "2") {
$scope.desc = true;
}
}
})
.filter("domed",function(){
return function(input){
var v=input.replace(/米/g,'*');
return v;
}
});
</script>
</head>
<body ng-controller="dome">
<h1 style="margin-left: 40%;">商品訂單資訊表</h1>
<input type="text" placeholder="使用者名稱搜尋" ng-model="name" class="bb" />
<input type="text" placeholder="手機號搜尋" ng-model="phone" class="aa" />
<select ng-model="selectCity" class="aa">
<option>選擇城市</option>
<option>北京</option>
<option>上海</option>
<option>重慶</option>
<option>天津</option>
<option>深圳</option>
</select>
<select ng-model="selectState" class="aa">
<option>選擇狀態</option>
<option>發貨</option>
<option>已發貨</option>
<option>已收貨</option>
</select>
<select ng-model="startMonth" class="aa">
<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" class="aa">
<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="paixu" ng-change="fun.xuan(paixu)" class="aa">
<option value="">Id正序</option>
<option value="-id">Id倒序</option>
<option value="+goodsName">商品名正序</option>
<option value="-goodsName">商品名倒序</option>
</select>
<br />
<br />
<br />
<button class="bb" style="background-color: green;color: white;border: 0 solid #28a54c;" ng-click="add()">新增訂單</button>
<button class="aa" style="background-color: green;color: white;border: 0 solid #28a54c;" ng-click="fhAll()">批量發貨</button>
<button class="aa" style="background-color: red;color: white;border: 0 solid #28a54c;" ng-click="delAll()">批量刪除</button>
<br />
<br />
<br />
<table align="center" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr style="background: #686868;">
<th><input type="checkbox" ng-model="checked1" ng-click="checkedAll()" /></th>
<th ng-click="title='id';desc=!desc">Id</th>
<th ng-click="title='goodsName';desc=!desc">商品名</th>
<th ng-click="title='userName';desc=!desc">使用者名稱</th>
<th>手機號</th>
<th ng-click="title='price';desc=!desc">價格</th>
<th>城市</th>
<th ng-click="title='time';desc=!desc">下單時間</th>
<th>狀態</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr ng-repeat=" m in data|filter:{userName:name}|filter:{tel:phone}|orderBy:title:desc|orderBy:[paixu,'id']|orderBy:[paixu,'goodsName']" ng-if="dizhi(m.city,selectCity)" ng-show="zhuangtai(m.goodsState,selectState)&& shijian($index)">
<td align="center"><input type="checkbox" ng-model="m.state" ng-click="selectOne($index)" /></td>
<td>{{m.id}}</td>
<td>
<span ng-hide="m.ed">{{m.goodsName|domed}}</span>
<span ng-show="m.ed==true">
<input ng-model="m.goodsName"/>
</span>
</td>
<td>{{m.userName}}</td>
<td>{{m.tel}}</td>
<td>{{m.price}}</td>
<td>{{m.city}}</td>
<td>{{m.time}}</td>
<td>
<span ng-if="m.goodsState == '發貨'">
<a ng-click="changeState($index)" href="#">{{m.goodsState}}</a>
</span>
<span ng-if="m.goodsState == '已發貨'">{{m.goodsState}}</span>
<span ng-if="m.goodsState == '已收貨'">{{m.goodsState}}</span></td>
<td>
<a href="#" ng-click="del(m)">
刪除
</a>
<a href="#" ng-hide="m.ed" ng-click="m.ed=true">
修改
</a>
<a href="#" ng-show="m.ed==true" ng-click="m.ed=false">
儲存
</a>
</td>
</tr>
</tbody>
</table>
<br /> <br />
<br />
<br />
<div ng-show="showtable">
<table border="1" cellspacing="0" cellpadding="10" align="center">
<thead>
<tr>
<th colspan="2">新增訂單表</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品名</td>
<td><input type="text" ng-model="goodsName" placeholder="5~10字元" /></td>
</tr>
<tr>
<td>使用者名稱</td>
<td><input type="text" ng-model="userName" placeholder="3~5字元" /></td>
</tr>
<tr>
<td>手機號</td>
<td><input type="text" ng-model="tel" placeholder="請輸入手機號" /></td>
</tr>
<tr>
<td>價格</td>
<td><input type="text" ng-model="price" placeholder="請輸入價格" /></td>
</tr>
<tr>
<td>地址</td>
<td>
<select ng-model="city">
<option>選擇城市</option>
<option>北京</option>
<option>上海</option>
<option>重慶</option>
<option>天津</option>
<option>深圳</option>
</select>
</td>
<tr>
<td colspan="2" align="center" style="background: greenyellow;">
<ul>
<li ng-show="ok1">商品名不能為空！</li>
<li ng-show="ok2">商品名必須是5-10個字元！</li>
<li ng-show="ok3">使用者名稱不能為空！</li>
<li ng-show="ok4">使用者名稱必須是3-5個字元！</li>
<li ng-show="ok5">手機號不能為空！</li>
<li ng-show="ok6">手機號格式不正確！</li>
<li ng-show="ok7">請選擇城市！</li>
<li ng-show="ok8">價錢不能為空！</li>
<li ng-show="ok9">價錢格式不正確</li>
</ul>
<button style="background: green;" ng-click="sub()">提交</button>
</td>
</tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>