<!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("con1",function($scope){
$scope.dates =[];
var aa1 ={
gid: 001,
gname: '手机',
gnum: 3,
gprice: 1000,
gcount:3000
};
var aa2 ={
gid: 002,
gname: '电脑',
gnum: 3,
gprice: 2000,
gcount: 6000
};
var aa3 ={
gid: 003,
gname: '电视',
gnum: 6,
gprice: 500,
gcount: 3000
};
$scope.dates.push(aa1);
$scope.dates.push(aa2);
$scope.dates.push(aa3);
//清空数据
$scope.delall=function(){
$scope.dates.length=0;
}
//单个删除
$scope.del=function(gname){
for (var i in $scope.dates) {
if ($scope.dates[i].gname==gname) {
$scope.dates.splice(i,1);
}
}
}
//总数量
$scope.gnum=function(){
nub=0;
for (var i in $scope.dates) {
nub=nub+$scope.dates[i].gnum;
}
return nub;
}
//总金额
$scope.gcount=function(){
nub=0;
for (var i in $scope.dates) {
nub=nub+$scope.dates[i].gnum*$scope.dates[i].gprice;
}
return nub;
}
})
</script>
<style>
tr:nth-child(2n+1){
background: green;
}
tr:nth-child(2n){
background: palevioletred;
}
</style>
</head>
<body ng-app="app" ng-controller="con1">
<div align="center">
<h1>我的购物车详情</h1>
<table border="1">
<input type="text" placeholder="请根据名称查询" ng-model="name"/>
<tr style="background: gray;">
<th><select ng-model="px">
<option value="">商品编号</option>
<option value="+gid">编号正序排列</option>
</select>
</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>
<th><select ng-model="px">
<option value="">价格小计</option>
<option value="-gcount">价格倒序排列</option>
</select>
</th>
<th>操作</th>
</tr>
<tr ng-repeat="d in dates|filter:{gname:name}|orderBy:px">
<td>{{d.gid}}</td>
<td>{{d.gname}}</td>
<td><button ng-click="d.gnum=d.gnum-1">-</button>{{d.gnum}}<button ng-click="d.gnum=d.gnum+1">+</button></td>
<td>{{d.gprice | currency:"¥"}}</td>
<td>{{d.gcount=d.gnum*d.gprice | currency:"¥"}}</td>
<td><button style="background: yellow;" ng-click="del(d.gname)">移除</button></td>
</tr>
</table>
<button style="background: green;">商品数量{{gnum()}}</button>
<button style="background: green;">商品总价{{gcount()}}</button>
<button style="background: yellow;" ng-click="delall()">清空购物车</button>
</div>
</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("con1",function($scope){
$scope.dates =[];
var aa1 ={
gid: 001,
gname: '手机',
gnum: 3,
gprice: 1000,
gcount:3000
};
var aa2 ={
gid: 002,
gname: '电脑',
gnum: 3,
gprice: 2000,
gcount: 6000
};
var aa3 ={
gid: 003,
gname: '电视',
gnum: 6,
gprice: 500,
gcount: 3000
};
$scope.dates.push(aa1);
$scope.dates.push(aa2);
$scope.dates.push(aa3);
//清空数据
$scope.delall=function(){
$scope.dates.length=0;
}
//单个删除
$scope.del=function(gname){
for (var i in $scope.dates) {
if ($scope.dates[i].gname==gname) {
$scope.dates.splice(i,1);
}
}
}
//总数量
$scope.gnum=function(){
nub=0;
for (var i in $scope.dates) {
nub=nub+$scope.dates[i].gnum;
}
return nub;
}
//总金额
$scope.gcount=function(){
nub=0;
for (var i in $scope.dates) {
nub=nub+$scope.dates[i].gnum*$scope.dates[i].gprice;
}
return nub;
}
})
</script>
<style>
tr:nth-child(2n+1){
background: green;
}
tr:nth-child(2n){
background: palevioletred;
}
</style>
</head>
<body ng-app="app" ng-controller="con1">
<div align="center">
<h1>我的购物车详情</h1>
<table border="1">
<input type="text" placeholder="请根据名称查询" ng-model="name"/>
<tr style="background: gray;">
<th><select ng-model="px">
<option value="">商品编号</option>
<option value="+gid">编号正序排列</option>
</select>
</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>
<th><select ng-model="px">
<option value="">价格小计</option>
<option value="-gcount">价格倒序排列</option>
</select>
</th>
<th>操作</th>
</tr>
<tr ng-repeat="d in dates|filter:{gname:name}|orderBy:px">
<td>{{d.gid}}</td>
<td>{{d.gname}}</td>
<td><button ng-click="d.gnum=d.gnum-1">-</button>{{d.gnum}}<button ng-click="d.gnum=d.gnum+1">+</button></td>
<td>{{d.gprice | currency:"¥"}}</td>
<td>{{d.gcount=d.gnum*d.gprice | currency:"¥"}}</td>
<td><button style="background: yellow;" ng-click="del(d.gname)">移除</button></td>
</tr>
</table>
<button style="background: green;">商品数量{{gnum()}}</button>
<button style="background: green;">商品总价{{gcount()}}</button>
<button style="background: yellow;" ng-click="delall()">清空购物车</button>
</div>
</body>
</html>