<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>购物车</title>
<script type=
"text/javascript"
src=
"js/angular.js"
></script>
</head>
<body ng-app=
"product"
ng-controller=
"productController"
>
<center>
<h2>商品列表</h2>
<p
class
=
"container"
>
<!--导航栏-->
<nav>
<p >
<p id=
"bs-example-navbar-collapse-1"
>
<p>
<input type=
"text"
ng-model=
"search"
placeholder=
"产品名称"
>
产品价格:
<select>
<option>0-1000</option>
<option>1000-2000</option>
<option>2000-5000</option>
</select>
<input type=
"button"
style=
"background:#FF0000"
value=
"全部删除"
ng-click=
"removeAll()"
>
</p>
</p>
</p>
</nav><br />
<table border=
"1 solid"
cellpadding=
"10"
cellspacing=
"0"
>
<thead>
<tr>
<th ng-click=
"sortProduct('id')"
>
产品编号
<span></span>
</th>
<th ng-click=
"sortProduct('name')"
>
产品名称
<span></span>
</th>
<th ng-click=
"sortProduct( 'price')"
>
产品价格
<span></span>
</th>
<th>
操作
<span></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=
"item in productList | filter:{ 'name':search} | orderBy:(orderSign+orderColumn) "
>
<td>
{{item.id}}
</td>
<td>
{{item.name}}
</td>
<td>
{{item.price | currency:
'(RMB)'
}}
</td>
<td>
<input type=
"button"
style=
"background:#FF0000"
value=
"删除"
ng-click=
"delProduct(item.name)"
>
</td>
</tr>
</tbody>
</table>
</p>
<script>
angular.module(
'product'
,[])
.factory(
'productList'
,
function
(){
return
[
{ id:910,name:
"imac"
,price:15400 },
{ id:80,name:
"iphone"
,price:5400 },
{ id:29,name:
"ipad"
,price:14200 },
{ id:500,name:
"ipad air"
,price:23400 },
{ id:1200,name:
"ipad mini"
,price:22000},
{ id:100,name:
"android"
,price:9990 }
]
})
.controller(
'productController'
,
function
(
$scope
,productList){
$scope
.productList=productList
$scope
.orderColumn=
'name'
;
$scope
.orderSign=
'-'
;
$scope
.sortProduct=
function
(sortColumn){
$scope
.orderColumn=sortColumn;
if
(
$scope
.orderSign==
"-"
){
$scope
.orderSign=
""
;
}
else
{
$scope
.orderSign=
'-'
;
}
};
$scope
.delProduct =
function
(name){
if
(name!=
""
){
if
(confirm(
"是否删除"
+name+
"商品"
) ){
var
p;
for
(index in
$scope
.productList) {
p =
$scope
.productList[index];
if
(p.name == name){
$scope
.productList.splice(index,1);
}
}
}
}
}
$scope
.removeAll =
function
(){
if
(confirm(
"你确定要清空购物车所有商品吗?"
)){
$scope
.productList = [];
}
}
});
</script>
</center>
</body>
</html>