1<body ng-app>2 3<div class= "Container" ng-controller= "Carcontroller" >4<table class= "table" ng-show= "Cart.length" >5<thead>6<tr>7<th> Product Code </th>8<th> Product Name </th>9<th> Purchase Quantity </th>Ten<th> Product Unit Price </th> One<th> Total Product </th> A<th> Operations </th> -</tr> - the</thead> -<tbody> -<TR ng-repeat= "Item in Cart" > -<td>{{item.id}}</td> +<td>{{item.name}}</td> -<td> +<button type= "button" ng-click= "Reduce (item.id)" class= "btn btn-primary" >-</button> A<input type= "text" value= "{{item.quantity}}" ng-model= "Item.quantity"/> at<button type= "button" ng-click= "Add (item.id)" class= "btn btn-primary" >+</button> -</td> -<td>{{item.price}}</td> -<td>{{item.price * item.quantity}}</td> -<td> -<button type= "button" ng-click= "Remove (item.id)" class= "btn btn-primary" > Remove </button> in</td> -</tr> to<tr> + -<td> Total purchase Price </td> the<td>{{totalprice ()}}</td> *<td> Total Purchases </td> $<td>{{totalquantity ()}}</td>Panax Notoginseng<TD colspan= "2" > -<button type= "button" ng-click= "ClearAll ()" class= "btn btn-primary" > Empty purchase cart </button> the</td> + A</tr> the</tbody> +</table> -<p ng-show= "!cart.length" > Your shopping cart is empty </p> $</div> $ -</body>
1 /**2 * Created by BH on 2016/4/24.3 */4 varCarcontroller =function($scope) {5$scope. Cart = [6 {7id:1000,8Name: "IPhone5S",9Quantity:3,Tenprice:4300 One }, A { -id:3300, -Name: "Iphone5", theQuantity:30, -price:3300 - }, - { +id:232, -Name: "Mac", +Quantity:3, Aprice:23000 at }, - { -id:1400, -Name: "ipad", -Quantity:5, -price:6900 in } - ]; to + //Calculate Total Price -$scope. totalprice=function(){ the varTotal = 0; *Angular.foreach ($scope. Cart,function(item) { $Total +=item.quantity *Item.price;Panax Notoginseng }) - returnTotal ; the } + //Calculate Total Price A$scope. totalquantity=function(){ the varTotal = 0; +Angular.foreach ($scope. Cart,function(item) { -Total + =parseint (item.quantity); $ }) $ returnTotal ; - } - varFindIndex =function(ID) { the varindex =-1; -Angular.foreach ($scope. Cart,function(item,key) {Wuyi if(Item.id = = =ID) { theindex =key; - Wu } - }); About returnindex; $ } -$scope. add=function(ID) { - varindex =findindex (ID); - if(index!==-1){ A++$scope. cart[index].quantity; + } the } -$scope. reduce=function(ID) { $ varindex =findindex (ID); the if(index!==-1){ the varitem =$scope. Cart[index]; the if(Item.quantity > 1){ the--item.quantity; -}Else{ in varReturnkey = Confirm ("Whether to remove the item from the shopping cart"); the if(returnkey) { the $scope. Remove (ID) About } the } the the } + } - the //removed fromBayi$scope. remove=function(ID) { the varindex =findindex (ID) the - if(Index!==-1) { -$scope. Cart.splice (Index, 1) the } the } the$scope. $watch ("cart",function(newvalue,oldvalue) { theAngular.foreach (NewValue,function(item,key) { - if(Item.quantity < 1){ the varReturnkey = Confirm ("Whether to remove the item from the shopping cart"); the if(returnkey) { the $scope. Remove (item.id)94}Else{ theItem.quantity =oldvalue[key].quantity the } the }98 }) About }) - 101$scope. clearall=function(){102$scope. Cart = {}103 }104 the 106}
Angular Shopping Cart
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
