<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module("app",[]);
app.controller("ctrl",function($scope){
$scope.username=[{
ck:false,
gid:"001",
gname:"手机 ",
gaum:"3",
gprice:"1000",
gcount:"3000"
},{
ck:false,
gid:"002",
gname:"电脑 ",
gaum:"3",
gprice:"2000",
gcount:"6000"
},{
ck:false,
gid:"003",
gname:"电视 ",
gaum:"3",
gprice:"500",
gcount:"3000"
}]
//删除
$scope.dele=function(d){
for(index in $scope.username){
if($scope.username[index].gid==d){
$scope.username.splice(index,1);
}
}
}
//全选
$scope.qx=function(){
for (var i = 0; i <$scope.username.length; i++) {
$scope.username[i].ck=$scope.all;
}
}
$scope.del=function(){
$scope.username.length=0;
}
</script>
<style>
tr:nth-child(2n+1){
background:yellow ;
}
tr:nth-child(2n){
background: cyan;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<center>
<h1>我的购物车详情</h1>
<input placeholder="根据名称查询" ng-model="name" />
<button ng-click="del()" style="background: yellow;" >清除购物车</button>
<table border="1px">
<tr align="center">
<td><input type="checkbox" ng-model="all" ng-click="qx()"/></td>
<td>商品编号
<button ng-click="px='gid';f=!f">△</button>
</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td>价格小计
<button ng-click="px='gcount';f=!f">△</button>
</td>
<td>操作</td>
</tr>
<tr ng-repeat="d in username | filter:{gname:name}|orderBy:px:f">
<td><input type="checkbox" ng-model="d.ck"/></td>
<td>{{d.gid}}</td>
<td>{{d.gname}}</td>
<td>{{d.gaum}}</td>
<td>{{d.gprice|currency:"¥"}}</td>
<td>{{d.gcount|currency:"¥"}}</td>
<td><button ng-click="dele(d.gid)">移除</button></td>
</tr>
</table>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module("app",[]);
app.controller("ctrl",function($scope){
$scope.username=[{
ck:false,
gid:"001",
gname:"手机 ",
gaum:"3",
gprice:"1000",
gcount:"3000"
},{
ck:false,
gid:"002",
gname:"电脑 ",
gaum:"3",
gprice:"2000",
gcount:"6000"
},{
ck:false,
gid:"003",
gname:"电视 ",
gaum:"3",
gprice:"500",
gcount:"3000"
}]
//删除
$scope.dele=function(d){
for(index in $scope.username){
if($scope.username[index].gid==d){
$scope.username.splice(index,1);
}
}
}
//全选
$scope.qx=function(){
for (var i = 0; i <$scope.username.length; i++) {
$scope.username[i].ck=$scope.all;
}
}
$scope.del=function(){
$scope.username.length=0;
}
</script>
<style>
tr:nth-child(2n+1){
background:yellow ;
}
tr:nth-child(2n){
background: cyan;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<center>
<h1>我的购物车详情</h1>
<input placeholder="根据名称查询" ng-model="name" />
<button ng-click="del()" style="background: yellow;" >清除购物车</button>
<table border="1px">
<tr align="center">
<td><input type="checkbox" ng-model="all" ng-click="qx()"/></td>
<td>商品编号
<button ng-click="px='gid';f=!f">△</button>
</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td>价格小计
<button ng-click="px='gcount';f=!f">△</button>
</td>
<td>操作</td>
</tr>
<tr ng-repeat="d in username | filter:{gname:name}|orderBy:px:f">
<td><input type="checkbox" ng-model="d.ck"/></td>
<td>{{d.gid}}</td>
<td>{{d.gname}}</td>
<td>{{d.gaum}}</td>
<td>{{d.gprice|currency:"¥"}}</td>
<td>{{d.gcount|currency:"¥"}}</td>
<td><button ng-click="dele(d.gid)">移除</button></td>
</tr>
</table>
</center>
</body>
</html>