<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.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">
<dir>
<h2 style="background: yellow; width: 300px;" align="center">我的购物车详情</h2>
<p><input type="text" placeholder="根据名称查询" ng-model="searchKey"/></p>
<table border="1" cellpadding="0" cellspacing="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" value="-" ng-click="reduceNums($index)"/>
<input type="text" ng-model="x.nums" />
<input type="button" value="+" ng-click="increaseNums($index)"/>
</td>
<td>{{x.price}}</td>
<td>{{x.nums}}</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>
</dir>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.goods = [
{id:"001",name:"手机",price:1000,nums:1},
{id:"002",name:"电脑",price:2000,nums:1},
{id:"004",name:"电视",price:3000,nums:1},
{id:"003",name:"鼠标",price:4000,nums:1}
];
$scope.orderKey = "";
$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].nums*$scope.goods[i].price);
}
return totalPrice;
}
$scope.reduceNums = function(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/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.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">
<dir>
<h2 style="background: yellow; width: 300px;" align="center">我的购物车详情</h2>
<p><input type="text" placeholder="根据名称查询" ng-model="searchKey"/></p>
<table border="1" cellpadding="0" cellspacing="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" value="-" ng-click="reduceNums($index)"/>
<input type="text" ng-model="x.nums" />
<input type="button" value="+" ng-click="increaseNums($index)"/>
</td>
<td>{{x.price}}</td>
<td>{{x.nums}}</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>
</dir>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.goods = [
{id:"001",name:"手机",price:1000,nums:1},
{id:"002",name:"电脑",price:2000,nums:1},
{id:"004",name:"电视",price:3000,nums:1},
{id:"003",name:"鼠标",price:4000,nums:1}
];
$scope.orderKey = "";
$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].nums*$scope.goods[i].price);
}
return totalPrice;
}
$scope.reduceNums = function(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>
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
