angular模糊查询和过滤修改
来源：互联网 发布：霍华德生涯得分数据 编辑：程序博客网 时间：2024/06/05 15:46
<!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>
<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>
阅读全文
0 0
- angular模糊查询和过滤修改
- Angular模糊查询和排序已经添加
- Angular模糊查询
- angular（过滤查询）
- coreData 模糊查询过滤
- angular下拉框模糊查询
- angular自定义过滤器模糊查询
- AngularJs模糊查询和修改密码
- html angular+route:模糊查询+限定年龄范围+全部删除+批量删除+修改密码+添加用户
- Angular内置过滤器+orderBy排序+模糊查询
- angular+自定义模糊查询+排序+三角
- angular删除数据+模糊查询,排序
- angular根据按钮点击事件模糊查询
- TClientDataSet过滤时模糊查询的问题
- jquery属性过滤选择器 模糊查询
- angular的添加,模糊查询,年龄区间查询,投票
- 模糊查询和排序
- angular+豪华版购物车+模糊查询+可以多选删除
- Vold源码分析
- NUIST OJ 1352 回顾 【差分】
- 折半排序
- 那些年mui webview遇到的坑
- HDOJ Repair the Wall JAVA 2124
- angular模糊查询和过滤修改
- Lambda Expressions(Sort)
- 服务端连接数据库
- C语言pojDNA字符串问题
- 【C++】动态规划方法以及Maximum Length of Repeated Subarray
- hook的LD_PRELOAD用法
- 替换空格：
- dokuwiki
- 第一个博客记录成长
