<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>angular</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script type="text/javascript"> //购物车中的数据; //var boughtList = {}; </script> <style> *{margin:0; padding:0; list-style:none;} #wrap{font-size:12px; line-height:20px; padding:20px;} .left li{float:left; padding:10px;} .shopcar li{float:left; padding:10px;} </style> </head> <body> <div id="wrap" ng-app="myApp" ng-controller="showItem"> <div style="overflow:hidden"> <ul class="left"> <li ng-repeat="value in items"> <p>名称：{{value.name}}</p> <p>单价：{{value.price}}</p> <p><a href="javascript:;" ng-click="addToShopCarList()">购买</a></p> </li> </ul> </div> <hr /> <p>点击购物车内的商品可以减少购买的商品数量</p> <div class="shopcar"> <ul style="overflow:hidden;"> <li ng-repeat="value in shopCar" ng-click="DelFromShopCarList()" style="cursor:pointer"> <p>名称：{{value.name}}</p> <p>数量：{{value.amount}}</p> <p>单价：{{value.price}}</p> </li> </ul> <p>商品总价：{{total}} 元</p> </div> </div> <script type="text/javascript"> var item = [ {id : '1',name : '蜂蜜' ,price : 30}, {id : '5',name : '鼠标' ,price : 39}, {id : '2',name : '黄豆酱',price : 15}, {id : '3',name : '护手霜',price : 15}, {id : '4',name : '保温杯',price : 29}, {id : '6',name : '米老头',price : 18} ]; var shopCar=[]; var app=angular.module("myApp",[]); app.controller("showItem",function($scope){ $scope.total=0; $scope.items=item; $scope.shopCar=shopCar; $scope.DelFromShopCarList=function(){ $scope.total-=this.value.price; for(var i=0;i<$scope.shopCar.length;i++){ if($scope.shopCar[i].id==this.value.id){ $scope.shopCar[i].amount-=1; if($scope.shopCar[i].amount===0){ $scope.shopCar.splice(i,1) } } } } $scope.addToShopCarList=function(){ var item={ name:this.value.name, price:this.value.price, id:this.value.id, amount:1, }; var len=shopCar.length; var inArr=true; for(var i=0;i<len;i++){ if(shopCar[i].id===this.value.id){ inArr=false; shopCar[i].amount+=1; break; } } if(inArr){ shopCar.push(item); } $scope.total+=shopCar[i].price; } }) </script> </body> </html>
头一次试验angularjs，不知道是不是这么玩，不对的话就看个热闹吧