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

最新推荐文章于 2022-12-28 21:36:04 发布

love_mysunshine

最新推荐文章于 2022-12-28 21:36:04 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/love_mysunshine/article/details/78328678

版权

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

love_mysunshine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs按商品类型,点击加入购物车

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> </style>  <script src="angular-1.5.5/angular.min.js"></script> <s
复制链接

扫一扫