angular.module("myApp", ["ionic"])
.config(function($stateProvider) {
$stateProvider
.state('00', {
url: '/01',
templateUrl: 'views/view1.html'
})
.state('02', {
url: '/02',
templateUrl: 'views/view2.html'
})
}).controller("demo", function($scope, $filter, $state) {
$state.go("00");
$scope.zongshu = 0;
$scope.zongjia = 0;
$scope.goodcart = [];
var List1 = [{
name: "鼠标",
p: "2016春季爆款",
price: 101.00,
type: "鼠标"
},
{
name: "键盘",
p: "2016夏季爆款",
price: 601.00,
type: "键盘"
},
{
name: "主机",
p: "2016秋季爆款",
price: 3001.00,
type: "主机"
},
{
name: "显示器",
p: "2016冬季爆款",
price: 8001.00,
type: "显示器"
}
];
$scope.sel = function(t) {
console.log(t);
$f = $filter("filter");
$scope.list = $f(List1, {
type: t
});
}
$scope.add = function(i) {
var good = $scope.list[i];
$scope.zongjia += good.price;
$scope.zongshu += 1;
add(good);
}
add = 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(index) {
$scope.goodcart[index].num -= 1;
if($scope.goodcart[index].num == 0) {
$scope.goodcart.splice(index, 1);
}
$scope.zongshu = $scope.zongshu - 1;
$scope.zongjia = $scope.zongjia - $scope.goodcart[index].good.price;
}
});
</script>
<body ng-app="myApp" ng-controller="demo">
<div class="bar bar-header bar-dark" style="height: 70px;">
<a class="button" style="width: 200px;font-size: 30px;line-height: 60px;" href="#/01">运动商城</a>
<h1 class="title" style="line-height: 70px;font-size: 15px;">购物车:总数量:{{zongshu}},总价:{{zongjia|currency:"RMB￥"}}</h1>
<a class="button bar-dark" style="width: 200px;font-size: 30px;" href="#/02">结算</a>
</div>
<hr />
<div ui-view></div>
</body>
view1:
<div style="width: 30%;height: 1200px;float: left;" >
<button style="width: 200px;height: 70px;font-size: 40px;border-radius: 20px;margin-left: 30px;margin-top: 80px;" ng-click="sel('')">首页</button>
<button style="width: 200px;height: 70px;font-size: 40px;border-radius: 20px;margin-left: 30px;margin-top: 80px;" ng-click="sel('鼠标')">商品01</button>
<button style="width: 200px;height: 70px;font-size: 40px;border-radius: 20px;margin-left: 30px;margin-top: 80px;" ng-click="sel('键盘')">商品02</button>
<button style="width: 200px;height: 70px;font-size: 40px;border-radius: 20px;margin-left: 30px;margin-top: 80px;" ng-click="sel('主机')">商品03</button>
<button style="width: 200px;height: 70px;font-size: 40px;border-radius: 20px;margin-left: 30px;margin-top: 80px;" ng-click="sel('显示器')">商品04</button>
</div>
<div id="content" style="margin-top: 90px;">
<div class="list" ng-repeat="li in list">
<a class="item item-thumbnail-left" href="#" style="width: 1500px;height: 160px; border-radius: 30px;margin-top: 20px;">
<h1>{{li.name}}</h1>
<img src="img/aa.jpg" style="width: 100px;height: 100px;float: left;">
<h1>{{li.p}}</h1>
<div style="width: 230px;height: 50px;background: red;position: absolute;left: 1200px;top: 30px;line-height: 50px;text-align: center;">
<p style="font-size: 30px;">{{li.price|currency:"RMB￥"}}</p>
</div>
<button ng-click="add($index)" style="width: 160px;height: 50px;background: green;position: absolute;left: 1270px;top: 100px;line-height: 50px;text-align: center;color: white;font-size: 20px;">
加入购物车
</button>
</a>
</div>
</div>
view2:
<div class="alert alert-warning" ng-show="goodcart.length==0" style="margin-top: 80px;font-size: 30px;">
您的购物车是空的。<a href="#/01" class="alert-link">继续购物</a>
</div>
<table style="width: 800px;height: 500px; border: 1;font-size: 30px;float: right;" ng-hide="goodcart.length==0">
<tr>
<th>数量</th>
<th>商品名称</th>
<th>单价</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr ng-repeat="g in goodcart">
<td>{{g.num}}</td>
<td>{{g.good.name}}</td>
<td>{{g.good.price|currency:"RMB￥"}}</td>
<td>{{g.num*g.good.price|currency:"RMB￥"}}</td>
<td><button style="background: blue;width: 100px;height: 60px;font-size: 20px;" ng-click="del($index)">删除</button></td>
</tr>
</table>
扫一扫
1470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
