资源简介

Angular JS BootStrap实现购物功能【商品价格计算、数量增减】


<script type="text/javascript">
var app=angular.module('myApp',[]);
app.controller('cartCtrl',function($scope){
$scope.products=[
{
id:'001',
name:'iphone5SE',
quintity:5,
price:3499,
},
{
id:'002',
name:'ipad Air2',
quintity:3,
price:3499,
},
{
id:'003',
name:'ipad Mini4',
quintity:6,
price:3499,
},
{
id:'004',
name:'iMac',
quintity:12,
price:3499,
},
{
id:'005',
name:'Nikon D7200',
quintity:1,
price:7000,
},
{
id:'006',
name:'ipod touch',
quintity:22,
price:1499,
}];
      //计算总价
$scope.totalPrice=function(){
var total=0;
angular.forEach($scope.products,function(item){
total =item.price*item.quintity;
console.info(item);return;
})
return total;
};
//计算总数量
$scope.totalQuintity=function(){
var total=0;
angular.forEach($scope.products,function(item){
total =item.quintity;
console.info(item);return;
})
return total;
};
$scope.Minus=function(id){
angular.forEach($scope.products,function(item,key){
if(item.id==id){
//判断数量是否大于1,是————》数量就减1
if(item.quintity>1){
   item.quintity--;
   return;
   }
//否————》提示是否删除该商品
else{
var isClear=confirm("再删就没了,想清除该商品么?");
if(isClear){
$scope.products.splice(key,1);
return;
}}
}
})
};
$scope.Add=function(id){
angular.forEach($scope.products,function(item){
if(item.id==id){
item.quintity ;
return;
}
})
};
$scope.Remove=function(id){
angular.forEach($scope.products,function(item,key){
if(item.id==id){
//当遍历的某一个对象的id==id时,获取该对象的索引值key
//第二个参数1表示从该索引起,删除1条数据,更改为2后,会删除索引连续的两条记录
$scope.products.splice(key,1);
return;
};
})
};
$scope.Clear=function(){
$scope.products={};
};

});
</script>

资源截图

代码片段和文件信息

 属性            大小     日期    时间   名称
----------- ---------  ---------- -----  ----

     文件        969  2016-09-06 12:24  AngularJs_ShopCart\.project

     文件     147430  2016-09-06 12:24  AngularJs_ShopCart\css\bootstrap.css

     文件      67646  2016-09-10 11:28  AngularJs_ShopCart\favicon.ico

     文件      20127  2016-09-06 12:24  AngularJs_ShopCart\fonts\glyphicons-halflings-regular.eot

     文件     108738  2016-09-06 12:24  AngularJs_ShopCart\fonts\glyphicons-halflings-regular.svg

     文件      45404  2016-09-06 12:24  AngularJs_ShopCart\fonts\glyphicons-halflings-regular.ttf

     文件      23424  2016-09-06 12:24  AngularJs_ShopCart\fonts\glyphicons-halflings-regular.woff

     文件      18028  2016-09-06 12:24  AngularJs_ShopCart\fonts\glyphicons-halflings-regular.woff2

     文件       2165  2016-09-06 12:24  AngularJs_ShopCart\img\HBuilder.png

     文件     737843  2016-09-06 12:24  AngularJs_ShopCart\js\angular.js

     文件      68890  2016-09-06 12:24  AngularJs_ShopCart\js\bootstrap.js

     文件       4138  2016-09-13 12:36  AngularJs_ShopCart\ShopCart.html

     目录          0  2016-09-13 12:55  AngularJs_ShopCart\css

     目录          0  2016-09-13 12:55  AngularJs_ShopCart\fonts

     目录          0  2016-09-13 12:55  AngularJs_ShopCart\img

     目录          0  2016-09-13 12:55  AngularJs_ShopCart\js

     目录          0  2016-09-13 12:56  AngularJs_ShopCart

----------- ---------  ---------- -----  ----

              1244802                    17


评论

共有 条评论