| <!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><button ng-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> |