最近在学习angular,写了一个简单的购物篮例子，分享给大家。

    效果图如下：（界面比较粗糙，大家凑合着看撒）

wKioL1TwicLRfxL8AAGhvXarJQw896.jpg


wKioL1TwkMXT3NL2AACWV6JrBoc265.jpg

整个界面分为两部分：

（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;
    }
})