<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
/>
<title>www.jb51.net Angular过滤、删除</title>
<style>
table{
border: 1px solid black;
width: 800px;
}
td , th{
border: 1px solid black;
text-align: center;
}
th{
background: #767674;
}
.d1{
width: 50%;
margin: 0 auto;
}
.d2{
margin-top: 10px;
}
.btn{
background: green;
color: white;
}
.btn1{
background: red;
color: white;
}
tr:nth-child(2n){
background-color: gainsboro;
}
</style>
<script src=
"angular.min.js"
></script>
<script type=
"text/javascript"
src=
"jquery-1.9.1.min.js"
></script>
<script>
angular.module(
"MyApp"
,[])
.controller(
"democ"
,
function
(
$scope
,
$filter
){
$scope
.isc = false;
$scope
.arrs = [{
checked:false,
id:7,
name:
"OPPO R9s"
,
user:
"赵云"
,
tel:15777777777,
price:4999,
city:
"北京"
,
time:
new
Date
(
'03-09 10:00'
),
sta:
"已发货"
},
{
checked:false,
id:12,
name:
"VIVO X20"
,
user:
"关羽"
,
tel:15333333333,
price:2998,
city:
"上海"
,
time:
new
Date
(
'08-22 10:00'
),
sta:
"已发货"
},
{
checked:false,
id:1,
name:
"iPhone 8 Plus"
,
user:
"曹操"
,
tel:15111111111,
price:7588,
city:
"北京"
,
time:
new
Date
(
'09-04 10:00'
),
sta:
"已发货"
},
{
checked:false,
id:11,
name:
"小*Note5"
,
user:
"黄忠"
,
tel:13222222222,
price:699,
city:
"重庆"
,
time:
new
Date
(
'02-28 10:00'
),
sta:
"发货"
},
{
checked:false,
id:1,
name:
"小*Mix2"
,
user:
"黄盖"
,
tel:13111111111,
price:3299,
city:
"北京"
,
time:
new
Date
(
'03-015 10:00'
),
sta:
"发货"
}];
$scope
.arr =
$scope
.arrs;
$scope
.seluser =
function
(){
$scope
.arr = [];
var
val =
$scope
.reg_user;
var
f =
$filter
(
"filter"
);
$scope
.arr = f(
$scope
.arrs,{
"user"
:val});
}
$scope
.seltel =
function
(){
$scope
.arr = [];
var
val =
$scope
.reg_tel;
var
f =
$filter
(
"filter"
);
$scope
.arr = f(
$scope
.arrs,{
"tel"
:val});
}
$scope
.selsta =
function
(){
$scope
.arr = [];
var
val =
$scope
.reg_sta;
var
f =
$filter
(
"filter"
);
$scope
.arr = f(
$scope
.arrs,{
"sta"
:val});
}
$scope
.ckAll =
function
(){
var
ck =
$scope
.sta_ck;
for
(
var
i=0; i<
$scope
.arrs.length; i++){
$scope
.arrs[i].checked = ck;
}
}
$scope
.del =
function
(th){
$scope
.arrs.splice(th,1);
}
$scope
.delAll =
function
(){
for
(
var
i=0; i<
$scope
.arrs.length; i++){
if
(
$scope
.arrs[i].checked==true){
$scope
.arrs.splice(i,1);
i--;
}
}
}
$scope
.add =
function
(){
var
d=
new
Date
();
$scope
.arrs.push({
checked:false,
id:
$scope
.a_id,
name:
$scope
.a_name,
user:
$scope
.a_user,
tel:
$scope
.a_tel,
price:
$scope
.a_price,
city:
$scope
.a_city,
time:d,
sta:
"发货"
});
$scope
.arr =
$scope
.arrs;
$scope
.isc = false;
}
});
</script>
</head>
<body ng-app=
"MyApp"
ng-controller=
"democ"
>
<p
class
=
"d1"
>
<p>
<input type=
"text"
placeholder=
"用户名搜索"
ng-change=
"seluser()"
ng-model=
"reg_user"
/>
<input type=
"text"
placeholder=
"手机号搜索"
ng-change=
"seltel()"
ng-model=
"reg_tel"
/>
<select>
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<select ng-change=
"selsta()"
ng-model=
"reg_sta"
>
<option value=
""
>选择状态</option>
<option value=
"发货"
>发货</option>
<option value=
"已发货"
>已发货</option>
</select>
<select ng-model=
"selid"
>
<option value=
""
>--请选择--</option>
<option value=
"id"
>ID正序</option>
<option value=
"-id"
>ID倒叙</option>
</select>
<select ng-model=
"selmonth"
>
<option value=
""
>开始月份</option>
<option value=
"1"
>1</option>
<option value=
"2"
>2</option>
<option value=
"3"
>3</option>
<option value=
"4"
>4</option>
<option value=
"5"
>5</option>
<option value=
"6"
>6</option>
<option value=
"7"
>7</option>
<option value=
"8"
>8</option>
<option value=
"9"
>9</option>
<option value=
"10"
>10</option>
<option value=
"11"
>11</option>
<option value=
"12"
>12</option>
</select>
<select ng-model=
"lastmonth"
>
<option value=
""
>结束月份</option>
<option value=
"1"
>1</option>
<option value=
"2"
>2</option>
<option value=
"3"
>3</option>
<option value=
"4"
>4</option>
<option value=
"5"
>5</option>
<option value=
"6"
>6</option>
<option value=
"7"
>7</option>
<option value=
"8"
>8</option>
<option value=
"9"
>9</option>
<option value=
"10"
>10</option>
<option value=
"11"
>11</option>
<option value=
"12"
>12</option>
</select>
</p>
<p
class
=
"d2"
>
<input type=
"button"
value=
"新增订单"
class
=
"btn"
ng-click=
"isc=true"
/>
<input type=
"button"
value=
"批量发货"
class
=
"btn"
/>
<input type=
"button"
value=
"批量删除"
class
=
"btn1"
ng-click=
"delAll()"
/>
敏感词:米(商品名)->替换成*
</p>
<p>
<table cellpadding=
"0"
cellspacing=
"0"
>
<tr>
<th><input type=
"checkbox"
ng-change=
"ckAll()"
ng-model=
"sta_ck"
/></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr ng-repeat=
"a in arr|orderBy : selid | filter:{time:selmonth} | filter:{time:lastmonth}"
>
<td><input type=
"checkbox"
ng-model=
"a.checked"
/></td>
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>{{a.user}}</td>
<td>{{a.tel}}</td>
<td>{{a.price|currency :
'¥'
}}</td>
<td>{{a.city}}</td>
<td>{{a.time|
date
:
'MM-HH hh:dd:ss'
}}</td>
<td>
<span ng-show=
"a.sta=='已发货'"
>{{a.sta}}</span>
<span ng-show=
"a.sta=='发货'"
><a href=
"#"
rel=
"external nofollow"
ng-click=
"a.sta='已发货'"
>{{a.sta}}</a></span>
</td>
<td><input type=
"button"
value=
"删除"
ng-click=
"del(this)"
/></td>
</tr>
</table>
</p>
<p ng-show=
"isc"
>
I D:<input type=
"text"
ng-model=
"a_id"
/><br />
商品名:<input type=
"text"
ng-model=
"a_name"
/><br />
用户名:<input type=
"text"
ng-model=
"a_user"
/><br />
手机号:<input type=
"text"
ng-model=
"a_tel"
/><br />
价 值:<input type=
"text"
ng-model=
"a_price"
/><br />
城 市:<input type=
"text"
ng-model=
"a_city"
/><br />
<input type=
"button"
value=
"保存"
ng-click=
"add()"
/>
</p>
</p>
</body>
</html>