前端_购物车选择多选少选

来源：互联网发布：邮轮上有网络吗编辑：程序博客网时间：2024/06/05 02:07
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../package/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>
阅读全文
0 0