angular.js交互式购物车结算页面代码

angular.js交互式购物车结算页面代码,支持商品数量增加减少计算统计,删除商品、清空购物车,快速搜索查找商品等功能。

JS代码

<script type="text/javascript" src="js/angular.min.js"></script> 
<script type="text/javascript" src="js/angular-ui-router.min.js" ></script> 
        <script> 
            var myApp = angular.module("app", ["ui.router"]); 
            myApp.controller('cont',function($scope,$http,$state){ 
                $scope.td=[ 
                    {name:"iphone5",math:1,price:100,}, 
                    {name:"iphone6",math:1,price:200,}, 
                    {name:"iphone6S",math:1,price:300,}, 
                    {name:"iphone7",math:1,price:400,}, 
                    {name:"iphone7 Plus",math:1,price:5699,}, 
                    {name:"iphone8",math:1,price:6699,}, 
                    {name:"iphone X",math:1,price:7699,}, 
                    {name:"iphone XS",math:1,price:8699,}, 
                    {name:"iphone XR",math:1,price:9699,}, 
                    {name:"iphone XS MAX",math:1,price:12999,} 
                ] 
                $scope.jia=function(item){ 
                    item.math++ 
                } 
                $scope.jian=function(item,index){ 
                    if(item.math>0){ 
                        item.math-- 
                    }else{ 
                        item.math==1 
                    } 
//                    if(item.math==0){ 
//                        $scope.td.splice(index, 1); //数量为0是 移除商品 
//                    } 
                } 
                $scope.del=function (index) { 
                    if (confirm("确认删除吗?") == true) { 
                        $scope.td.splice(index, 1); 
                    } 
                }//点击每条删除 
                 
                $scope.totalprice = function() { 
                        var to_price = 0 
                        for(var i = 0; i < $scope.td.length; i++) { 
                            to_price += $scope.td[i].math * $scope.td[i].price 
                        } 
                        return to_price; 
                 }//总价格 
                 
                $scope.zzprice=function(){ 
                    var to_price = 0 
                        for(var i = 0; i < $scope.td.length; i++) { 
                            to_price += $scope.td[i].math 
                        } 
                        return to_price; 
                }//总数 
                 
                $scope.removeAll = function() { 
                    if (confirm("确认清空购物车吗?") == true) { 
                        $scope.td=[]; 
                    } 
                }//清空购物车 
                 
            }) 
        </script>
打赏
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录