<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
thead{
background: gray;
}
tbody tr:nth-child(even){
background-color: deeppink;
}
tbody tr:nth-child(odd){
background-color: green;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div>
<h2>我的购物车详情</h2>
<p><input type="text" name="" id="" value="" placeholder="根据名称查询" ng-model="searchKey"/></p>
<table border="1" cellspacing="0" cellpadding="0" width="60%">
<thead>
<tr>
<th ng-click="orderbyId()">商品编号</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>
<th ng-click="orderbyCount()">价格小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=" x in goods|filter:{name:searchKey}|orderBy:orderKey">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<input type="button" id="" value="-" ng-model="" ng-click="reduceNums($index)" />
<input type="text" id="" ng-model="x.nums" />
<input type="button" id="" value="+" ng-model="" ng-click="increaseNums($index)" />
</td>
<td>{{x.price}}</td>
<td>{{x.nums*x.price}}</td>
<td><input type="button" id="" value="移除" ng-click="removeGoods(x.name)" /></td>
</tr>
</tbody>
</table>
<div>
<span>商品总数是：{{getTotalNum()}}</span>
<span>商品总价是：{{getTotalPrice()}}</span>
<input type="button" id="" value="清空购物车" ng-click="clearGoods()" />
</div>
</div>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
//初使化
$scope.num=0;
//排序关键字
$scope.orderKey="";
$scope.goods=[
{id:"001",name:"手机",price:1000,nums:1},
{id:"002",name:"电脑",price:2000,nums:1},
{id:"004",name:"电视",price:500,nums:1},
{id:"003",name:"鼠标",price:90,nums:1}];
$scope.orderbyId=function(){
$scope.orderKey="id";
}
$scope.removeGoods=function(gname){
for (var i = 0; i <$scope.goods.length; i++) {
if($scope.goods[i].name==gname){
$scope.goods.splice(i,1);
break;
}
}
}
$scope.clearGoods=function(){
//清空所有购物车数据
$scope.goods=[];
}
//计算总数量
$scope.getTotalNum=function(){
var totalNum=0;
for (var i = 0; i < $scope.goods.length; i++) {
totalNum+=$scope.goods[i].nums;
}
return totalNum;
}
//计算总价格
$scope.getTotalPrice=function(){
var totalPrice=0;
for (var i = 0; i < $scope.goods.length; i++) {
totalPrice+=($scope.goods[i].price*$scope.goods[i].nums)
}
return totalPrice;
}
//数量减少
$scope.reduceNums=function(index){
// alert(index);
$scope.goods[index].nums--;
if($scope.goods[index].nums<1){
var c=confirm("确定要删除该产品吗？");
if(c){
$scope.goods.splice(index,1);
}
}
}
//数量增加
$scope.increaseNums=function(index){
$scope.goods[index].nums++;
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
thead{
background: gray;
}
tbody tr:nth-child(even){
background-color: deeppink;
}
tbody tr:nth-child(odd){
background-color: green;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div>
<h2>我的购物车详情</h2>
<p><input type="text" name="" id="" value="" placeholder="根据名称查询" ng-model="searchKey"/></p>
<table border="1" cellspacing="0" cellpadding="0" width="60%">
<thead>
<tr>
<th ng-click="orderbyId()">商品编号</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>
<th ng-click="orderbyCount()">价格小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=" x in goods|filter:{name:searchKey}|orderBy:orderKey">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<input type="button" id="" value="-" ng-model="" ng-click="reduceNums($index)" />
<input type="text" id="" ng-model="x.nums" />
<input type="button" id="" value="+" ng-model="" ng-click="increaseNums($index)" />
</td>
<td>{{x.price}}</td>
<td>{{x.nums*x.price}}</td>
<td><input type="button" id="" value="移除" ng-click="removeGoods(x.name)" /></td>
</tr>
</tbody>
</table>
<div>
<span>商品总数是：{{getTotalNum()}}</span>
<span>商品总价是：{{getTotalPrice()}}</span>
<input type="button" id="" value="清空购物车" ng-click="clearGoods()" />
</div>
</div>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
//初使化
$scope.num=0;
//排序关键字
$scope.orderKey="";
$scope.goods=[
{id:"001",name:"手机",price:1000,nums:1},
{id:"002",name:"电脑",price:2000,nums:1},
{id:"004",name:"电视",price:500,nums:1},
{id:"003",name:"鼠标",price:90,nums:1}];
$scope.orderbyId=function(){
$scope.orderKey="id";
}
$scope.removeGoods=function(gname){
for (var i = 0; i <$scope.goods.length; i++) {
if($scope.goods[i].name==gname){
$scope.goods.splice(i,1);
break;
}
}
}
$scope.clearGoods=function(){
//清空所有购物车数据
$scope.goods=[];
}
//计算总数量
$scope.getTotalNum=function(){
var totalNum=0;
for (var i = 0; i < $scope.goods.length; i++) {
totalNum+=$scope.goods[i].nums;
}
return totalNum;
}
//计算总价格
$scope.getTotalPrice=function(){
var totalPrice=0;
for (var i = 0; i < $scope.goods.length; i++) {
totalPrice+=($scope.goods[i].price*$scope.goods[i].nums)
}
return totalPrice;
}
//数量减少
$scope.reduceNums=function(index){
// alert(index);
$scope.goods[index].nums--;
if($scope.goods[index].nums<1){
var c=confirm("确定要删除该产品吗？");
if(c){
$scope.goods.splice(index,1);
}
}
}
//数量增加
$scope.increaseNums=function(index){
$scope.goods[index].nums++;
}
});
</script>
</body>
</html>
3359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
