资源简介
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
相关资源
-
三国杀版连连看,HTML5+ja
vasc ript脚 -
ja
vasc ript 写的俄罗斯方块游戏 - HTML5游戏开发毕业课程设计,课程设计
- html5 象棋游戏
- html5 网页转盘抽奖
- 捕鱼游戏HTML5版
- HTML5游戏 fruit ninja 水果忍者
- js 红包雨抽奖效果
- js 吃月饼 小游戏
- HTML5 赣极方棋 游戏
- egret飞机大战源码
- egret黑白方块源码
- HTML仿超级玛丽小游戏
- 愤怒的小鸟 游戏
- html5疯狂数钱 小游戏源码(带声音仿
- html5 消消乐小游戏源码
- html5 消消乐demo小游戏
- 大家来找茬游戏以JS实现
- HTML5实现的水果忍者网页版切水果游戏
- HTML 拼图游戏,js拼图
- 拳皇HTML小游戏源码h5+nodejs
- Html5太空战舰 小游戏源码
- html5植物大战僵尸游戏源码
- cocoscreator跑酷游戏源码js语言开发
- HTML贪吃蛇游戏,附重玩,加速,暂停
- 农场游戏源码-cocos creator
- SyntaxHighlighter[代码高亮]
- KindEditor HTML在线编辑器 v4.1.4
- Jquery lightbox 插件实现 图片弹出层放大
- Jquery写的幸运大转盘抽奖用asp.net处理
评论
共有 条评论