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

来源:https://www.sucaihuo.com/js/4049.html 2018-11-17 16:36浏览(486) 收藏

angular.js交互式购物车结算页面代码,支持商品数量增加减少计算统计,删除商品、清空购物车,快速搜索查找商品等功能。
angular.js交互式购物车结算页面代码
分类:其它特效 > 购物车 难易:中级
查看演示 下载资源 下载积分: 20 积分

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
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2