angularjs按商品类型,点击加入购物车

来源：互联网发布：学编程开发怎样编辑：程序博客网时间：2024/05/16 08:16
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>    </style>    <!--导入angular包-->    <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: "商品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: "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: "商品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"},                ]            }            /*判断弹出框*/            $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;                    }                }                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.cart=[];            $scope.add=function(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><!--ng-myapp,ng-myCtrl--><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>    <tr>        <td>商品类别</td>        <td>商品名称</td>        <td>商品价格</td>        <td>添加购物车</td>    </tr>    <!--过滤-->    <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></table><!--加入购物车--><table>    <tr>        <th>产品</th>        <th>数量</th>        <th>价格</th>        <th>小计</th>    </tr>    <tr ng-repeat="item in cart">        <td>{{item.item.name}}</td>        <!--数量num运用的是定义的变量,按照点击次数算-->        <td>{{item.num}}</td>        <td>{{item.item.price}}</td>        <td>{{item.item.price*item.num}}</td>    </tr></table></body></html>
阅读全文
0 0