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