angula简单应用---购物篮

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

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

整个界面分为两部分：

（1）展示已经选择的购物记录；

展示所有购物记录使用ng-repeat遍历items显示所有购物记录：

           `cart`.`count`
           
           `cart`.`price`{{item.price |currency}} 
           `cart`.`itemTotal`{{item.price*item.count| currency}}
           `cart`.`remove`    
        

（2） 总价计算（折扣前，优惠劵，折后总价）

    
       

            `cart`.`total`{{total() | currency}}
       
       

           `cart`.`voucher`{{voucherPrice |currency}}
       
       

           `cart`.`totalPrice`{{totalPrice() |currency}}
       
    

控制器中主要实现了一下功能：

移出某一项：

$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

    #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;
    }

   


    
    
       `cart`.`title`
               `cart`.`isEmpty`走你

                                 `cart`.`count`                                       `cart`.`price`{{item.price | currency}}                     `cart`.`itemTotal`{{item.price*item.count | currency}}                    `cart`.`remove`