angular实现商品购物

最新推荐文章于 2024-06-20 09:43:32 发布

gh0708

最新推荐文章于 2024-06-20 09:43:32 发布

阅读量424

点赞数 1

分类专栏： Web前段文章标签： angularjs lgh

本文链接：https://blog.csdn.net/gh0708/article/details/78345945

版权

Web前段专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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;
                 }
             }
             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){
                //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>
        <th>商品类别</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>添加到购物车</th>
    </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>