angularJs shoppingCar

来源：互联网发布：淘宝直播哪里看编辑：程序博客网时间：2024/06/11 04:41

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular-1.5.5/angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function($scope){ $scope.data = { categories: [{check: false, category: "商品01"}, {check: false, category: "商品02"}, {check: false, category: "商品03"}, {check: false, category: "商品04"}], //商品明细 products: [ {category: "商品01", name: "鼠标", desc: "2016春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"}, {category: "商品01", name: "键盘", desc: "2016夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"}, {category: "商品01", name: "主机", desc: "2016秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"}, {category: "商品01", name: "显示器", desc: "2016冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"}, {category: "商品01", name: "鼠标", desc: "2016春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"}, {category: "商品01", name: "键盘", desc: "2016夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"}, {category: "商品01", name: "主机", desc: "2016秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"}, {category: "商品01", name: "显示器", desc: "2016冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"}, {category: "商品02", name: "鼠标", desc: "2015春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"}, {category: "商品02", name: "键盘", desc: "2015夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"}, {category: "商品02", name: "主机", desc: "2015秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"}, {category: "商品02", name: "显示器", desc: "2015冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"}, {category: "商品03", name: "鼠标", desc: "2014春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"}, {category: "商品03", name: "键盘", desc: "2014夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"}, {category: "商品03", name: "主机", desc: "2014秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"}, {category: "商品03", name: "显示器", desc: "2014冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"}, {category: "商品04", name: "鼠标", desc: "2013春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"}, {category: "商品04", name: "键盘", desc: "2013夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"}, {category: "商品04", name: "主机", desc: "2013秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"}, {category: "商品04", name: "显示器", desc: "2013冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"} ] }; //获取选取的内容 $scope.fun=function(){ var n=0; var j=0; for(var i=0;i<$scope.data.categories.length;i++){ if($scope.data.categories[i].check==true){ n++; j=i; } } console.log(n); if(n==0){ alert("啥都没选"); }else if(n>=2){ alert("选多了"); }else if(n==1){ alert($scope.data.categories[j].category); $scope.sel=$scope.data.categories[j].category; } }; //过滤商品 /* $scope.catFilter=function(item){ //console.log(item); if($scope.sel==item.category||$scope.sel==null){ return true; }else{ return false; } };*/ //添加购物车 $scope.cart=[]; $scope.add=function(item){ //console.log(item); var has=false; for(var i=0;i<$scope.cart.length;i++){ if(item.name==$scope.cart[i].item.name){ console.log(1); has=true; $scope.cart[i].num++; break; }else{ console.log(0); has=false; } }; if(has==false){ $scope.cart.push({item:item,num:1}); } } }); </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <ul> <li ng-repeat="item in data.categories"> <input type="checkbox" ng-model="item.check"> {{item.category}} </li> </ul> <button ng-click="fun()">选取对应商品</button> <table> <thead> <tr> <td>商品类别</td> <td>商品名称</td> <td>商品价格</td> <td>添加购物车</td> </tr> </thead> <tbody> <tr ng-repeat="item in data.products|filter:sel"> <td>{{item.category}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td><buttonng-click="add(item)">添加购物</button></td> </tr> </tbody> </table> <h2>购物车</h2> <table> <thead> <tr> <th>产品</th> <th>数量</th> <th>价格</th> <th>小计</th> </tr> </thead> <tbody> <tr ng-repeat="item in cart"> <td>{{item.item.name}}</td> <td>{{item.num}}</td> <td>{{item.item.price}}</td> <td>{{item.item.price*item.num}}</td> </tr> </tbody> </table> </body> </html>

阅读全文

0 0