ionis 和angularjs 购物车的代码

s秋天

于 2017-11-19 19:37:25 发布

阅读量204

点赞数

本文链接：https://blog.csdn.net/changten/article/details/78576274

版权

//主页面

<head>
<meta charset="utf-8" />
<title></title>
<link href="lib/css/ionic.min.css" rel="stylesheet" />
<script src="lib/js/ionic.bundle.min.js"></script>
<script>

</script>
<style>
.content{
margin-top: 50px;
}
.zong {

height: 1000px;
width: 1100px;
margin: 0 auto;
}

.left {
margin-top: 50px;
height: 800px;
width: 150px;
float: left;
}

.right {
margin-top: 50px;
height: 800px;
width: 800px;
float: left;
}
</style>
<script type="text/javascript">
angular.module("myapp", ["ionic"])
.config(function($stateProvider) {
$stateProvider
.state("state1", {
url: "/page1",
templateUrl: "page1.html"
})
.state("state2", {
url: "/page2", //点击结算超链接的路径 href="#/cart"
templateUrl: "page2.html"
})

})
.controller("democ", function($scope,$state,$filter,$http) {
$state.go("state1");

var datagoods;
$scope.count=0;
$scope.sumprice=0;
$scope.goodcart=[];

//获取json数据
$http.get("datas.json").success(function(resp){
console.log("获取到的商品数组,", resp);
$scope.goods=resp;
datagoods=resp;
})
//过滤器商品的分类
$scope.seldata=function(t)
{
$f=$filter("filter");
$scope.goods=$f(datagoods,{
"type":t
});
}
//想购物车添加物品
$scope.jia=function(x){
var good= $scope.goods[x];
$scope.count=$scope.count+1;
$scope.sumprice=$scope.sumprice+good.price;

addcart(good);
}
addcart =function(good){

var b=false;
for(var i=0;i<$scope.goodcart.length;i++)
{
if($scope.goodcart[i].good==good)
{
$scope.goodcart[i].num=$scope.goodcart[i].num+1;
b=true;
return;
}
}
if(b==false)
{
$scope.goodcart.push({
"good":good,
"num":1
});
}
}
//删除商品
$scope.del=function(s){
var da= $scope.goodcart[s];
da.num=da.num-1;

if(da.num==0)
{
$scope.goodcart.splice(s,1);
}
$scope.count=$scope.count-1;
$scope.sumprice=$scope.sumprice-da.good.price;
}
})
</script>
</head>

<body ng-app="myapp" ng-controller="democ">
<div class="zong">
<div class="bar bar-header bar-dark">
<a class="button button-clear" href="#/page1" >商城</a>
<div class="title">您的购物车:{{count}}个商品 {{sumprice|currency:'RMB ￥'}}</div>
<a class="button button-light" href="#/page2" >结账</a>

</div>

<div ui-view></div>
</div>
</body>

// 商品页面

<div class="left">
<button class="button" style="width: 150px;" ng-click="seldata('')">
首页
</button>
<br />
<button class="button" style="width: 150px;" ng-click="seldata('男装')">
男装
</button><br />
<button class="button" style="width: 150px;" ng-click="seldata('女装')">
女装
</button><br />
<button class="button" style="width: 150px;" ng-click="seldata('饰品')">
饰品
</button>
</div>
<div class="right">
<ul class="list">
<li class="item" ng-repeat="d in goods">
<h3>{{d.proname}}</h3>
<img src="img/bbb.jpg" width="100px" />
<button class="button button-calm" style="float: right;" ng-click="jia($index)">加入购物车</button>
<span style="float: right;">{{d.price|currency:'RMB ￥'}}</span>
</li>
</ul>
</div>

//购物车信息

//当购物车为空时显示

<div style="margin-top: 100px;" class="alert alert-warning" ng-show="goodcart.length==0">
购物车是空的快去添加吧！<a href="#/page1" class="alert-link">去购物</a>
</div>

//当购物车不为空时显示
<div class="content" ng-hide="goodcart.length==0">
<table style="width: 1000px;">
<tr>
<th>数量</th>
<th>商品名称</th>
<th>价钱</th>
<th>小计</th>
</tr>
<tr ng-repeat="c in goodcart" style="text-align: center;" >
<td>{{c.num}}</td>
<td>{{c.good.proname}}</td>
<td>{{c.good.price}}</td>
<td>{{c.num * c.good.price|currency:'RMB ￥'}}
<button class="button-small" ng-click="del($index)">删除</button>
</td>
</tr>
</table>
</div>

s秋天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionis 和angularjs 购物车的代码

//主页面.content{margin-top: 50px;}.zong {height: 1000px;width: 1100px;margin: 0 auto;}.left {margin-top: 50px;height: 800px;width: 150px;float: left;}
复制链接

扫一扫