angular实现商品购物

来源：互联网发布：淘宝宠物店推荐编辑：程序博客网时间：2024/05/01 04:42
<!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>
阅读全文
0 0