angula简单应用---购物篮
最近在学习angular,写了一个简单的购物篮例子，分享给大家。
效果图如下：（界面比较粗糙，大家凑合着看撒）
整个界面分为两部分：
（1）展示已经选择的购物记录；
展示所有购物记录使用ng-repeat遍历items显示所有购物记录：
<div ng-repeat="item in items" class="item">
<span class="common">{{cart.count}}</span>
<input ng-model="item.count"class="count"></input>
<span class="common">{{cart.price}}</span><span>{{item.price |currency}}</span>
<span class="common">{{cart.itemTotal}}</span><span>{{item.price*item.count| currency}}</span>
<button ng-click="removeItem()"class="totalCommon">{{cart.remove}}</button>
</div>
（2） 总价计算（折扣前，优惠�唬�折后总价）
<div class="item" ng-show ="!cart.emptyTitle">
<div class="total item">
<div>
<span class="common">{{cart.total}}</span><span>{{total() | currency}}</span>
</div>
<div>
<span class="common">{{cart.voucher}}</span><span>{{voucherPrice |currency}}</span>
</div>
<div>
<span class="common">{{cart.totalPrice}}</span><span>{{totalPrice() |currency}}</span>
</div>
</div>
</div>
控制器中主要实现了一下功能：
移出某一项：
$scope.removeItem = function()
{
$scope.items.splice(this.$index, 1);
if($scope.items.length === 0)//当没有购物记录时，提示“您的购物篮记录为空，赶紧购物吧！”
{
$scope.cart.emptyTitle = true;
}
}
计算折扣前的总价：
$scope.total = function()
{
var total = 0.0;
for(i = 0; i < $scope.items.length; i++)
{
var tempItem = $scope.items[i];
total = total + tempItem.price*tempItem.count;
}
return total;
}
计算最终的价格：
$scope.totalPrice = function()
{
var tempPrice = $scope.total();
var result = tempPrice;
if (tempPrice > 200)
{
result = tempPrice*0.95;
}
elseif (tempPrice > 500)
{
result = tempPrice*0.80;
}
elseif(tempPrice > 800)
{
result = tempPrice*0.60;
}
return result - $scope.voucherPrice;
}
最终的代码如下：
angularCart.html
<html ng-app = "cartApp">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style type="text/css">
#cart {
width: 500px;
border: 2px solid;
border-color: red;
padding: 20px;
}
#title {
font-style: normal;
font-size: 20;
font-weight: bolder;
}
.item {
border: 1px solid;
border-color: red;
width: 100%;
margin-bottom: 10px;
padding: 5px;
}
.count {
width: 50px;
}
.total {
width: 40%;
margin-left: 60%;
}
.common {
font-weight: bolder;
}
.but {
text-align: center;
}
.totalCommon {
float: right;
}
</style>
<script src="angular.min.js"></script>
</head>
<body ng-controller="cartController">
<form id="cartForm">
<div id="cart">
<center id ="title">{{cart.title}}</center>
<div class="item"ng-show ="cart.emptyTitle">{{cart.isEmpty}}<a href="http://www.jd.com/">走你</a></div>
<div ng-repeat="item initems" class="item">
<span class="common">{{cart.count}}</span>
<input ng-model="item.count"class="count"></input>
<span class="common">{{cart.price}}</span><span>{{item.price | currency}}</span>
<span class="common">{{cart.itemTotal}}</span><span>{{item.price*item.count | currency}}</span>
<button ng-click="removeItem()"class="totalCommon">{{cart.remove}}</button>
</div>
<div class="item" ng-show="!cart.emptyTitle">
<div class="totalitem">
<div>
<span class="common">{{cart.total}}</span><span>{{total() | currency}}</span>
</div>
<div>
<span class="common">{{cart.voucher}}</span><span>{{voucherPrice |currency}}</span>
</div>
<div>
<span class="common">{{cart.totalPrice}}</span><span>{{totalPrice() |currency}}</span>
</div>
</div>
</div>
<div class="but">
<button ng-click="submit()">{{cart.submit}}</button>
<button ng-click="cancel()">{{cart.cancel}}</button>
</div>
</div>
</form>
<script src="angularScript_cart.js"></script>
</body>
</html>
angularScript_cart.js
var cartApp = angular.module("cartApp", []);
cartApp.controller("cartController", function($scope)
{
$scope.cart = {title:"购物篮",price:"单价：", count:"数量：",
itemTotal:"该项总计：", remove:"取消该项",
isEmpty:"您的购物篮记录为空，赶紧购物吧！",
emptyTitle:false,total:"总价：",
voucher:"优惠�唬�",totalPrice:"实际应付：",
cancel:"取消",submit:"提交"
}
$scope.voucherPrice = 50;
$scope.items = [{price:88.8,count:8}, {price:20.0,count:6},
{price:48.6, count:10},{price:80.0,count:1}];
$scope.removeItem = function()
{
$scope.items.splice(this.$index, 1);
if($scope.items.length === 0)
{
$scope.cart.emptyTitle = true;
}
}
$scope.total = function()
{
var total = 0.0;
for(i = 0; i < $scope.items.length; i++)
{
var tempItem = $scope.items[i];
total = total + tempItem.price*tempItem.count;
}
return total;
}
$scope.totalPrice = function()
{
var tempPrice = $scope.total();
var result = tempPrice;
if (tempPrice > 200)
{
result = tempPrice*0.95;
}
elseif (tempPrice > 500)
{
result = tempPrice*0.80;
}
elseif(tempPrice > 800)
{
result = tempPrice*0.60;
}
return result - $scope.voucherPrice;
}
})