混合开发(2)
<!DOCTYPE html>
<html ng-app="App"><head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
var Ddata=[
{
gid:001,
gname:"手机",
gnum:3,
gprice:1000,
gcount:3000 },
{
gid:002,
gname:"电脑",
gnum:3,
gprice:2000,
gcount:6000 },
{
gid:003,
gname:"电视",
gnum:6,
gprice:5000,
gcount:3000 }
];
</script>
<script type="text/javascript">
var app=angular.module("App",[]);
app.controller("Ctrl",function($scope){
$scope.data = Ddata;
$scope.del=function($index){
$scope.data.splice($index,1);
}
$scope.orderkey="gid";
$scope.counts=function(){
var a=0;
for (var i=0; i<$scope.data.length; i++) {
a+=$scope.data[i].gnum;
}
return a;
}
$scope.prices=function(){
var a=0;
for (var i=0; i<$scope.data.length; i++) {
a+=$scope.data[i].gnum*$scope.data[i].gprice;
}
return a;
}
$scope.Alldel=function(){
for (var i=$scope.data.length; i>=0; i--) {
$scope.data.splice(i,1);
}
}
$scope.chan=function($index){
if($scope.data[$index].gnum<=0){
var f=confirm("确定要删除该产品吗?");
if(f){
$scope.data.splice($index,1);
}
}
}
})
</script>
<style>
.css1{
background: blueviolet;
}
.css2{
background: sandybrown;
}
</style>
</head>
<body ng-controller="Ctrl">
<h1 style="text-align: center;"><span style="background: #31708F;">我的购物车详情</span></h1>
<input type="text" style="background: yellow; margin-left: 700px;" placeholder="根据名称查询" ng-model="searchcommodity"/>
<table border="2" cellpadding="1" style="margin-left: 420px;">
<tr style="background: #8C8C8C;">
<td>
商品编号
<input type="button" value="︿" ng-click="orderkey='gid'" />
</td>
<td>
商品名称
</td>
<td>
商品数量
</td>
<td>
商品单价
</td>
<td>
价格小计
<input type="button" value="﹀" ng-click="orderkey='gunm*gprice'" />
</td>
<td>
操作
</td>
</tr>
<tr ng-repeat="user in data | filter:{gname:searchcommodity}" class="{{$even?'css1':'css2'}}">
<td>
{{user.gid}}
</td>
<td>
{{user.gname}}
</td>
<td>
<input type="number" value="{{user.gnum}}" ng-model="user.gnum" ng-change="chan($index)"/>
</td>
<td>
{{user.gprice}}
</td>
<td>
{{user.gcount}}
</td>
<td>
<input type="button" value="移除" ng-click="del($index)"/>
</td>
</tr>
</table>
<div style="margin-left: 430px;">
<span>商品总数:</span>
<span>{{counts()}} </span>
<span>商品总价:</span>
<span>{{prices()}}</span>
<button ng-click="Alldel()" style="margin-left: 100px; background: yellow;">清空购物车</button>
</div>
</body>
</html>