今天给大家分享一个购物车的例子,希望对大家有所帮助
2017-09-22 07:50
585 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular-1.5.5/angular.js"></script>
<style>
button{
background: red;
}
</style>
<script>
var my=angular.module("my",[]);
my.controller("mys",function ($scope) {
/*随意添加数据*/
$scope.data=[
{name:"iPhone8",count:1,price:"8888"},
{name:"iPhone9",count:1,price:"9888"},
{name:"iPhone2s",count:1,price:"3888"},
{name:"iPhone7p+",count:1,price:"10088"}
]
/*删除一个*/
$scope.del=function (index) {
if(confirm('确定移除此项嘛？')){
$scope.data.splice(index,1);
}
};
//增加
$scope.incr = function(index){
$scope.data[index].count++;
}
//减少
$scope.decr = function(index){
if($scope.data[index].count > 1){
$scope.data[index].count--;
}
}
/*总价格*/
$scope.allSum=function () {
var allPrice=0;
for(var i=0;i<$scope.data.length;i++){
allPrice+=$scope.data[i].price*$scope.data[i].count;
}
return allPrice;
};
/*总个数*/
$scope.allNum=function () {
var allnumber=0;
for(var i=0;i<$scope.data.length;i++){
allnumber+=$scope.data[i].count;
}
return allnumber;
};
/*清空购物车*/
$scope.qingkong=function () {
if($scope.data.length==0){
alert('你的购物车为空');
}else{
$scope.data=[];
}
}
})
</script>
</head>
<body ng-app="my" ng-controller="mys">
<table border="1" width="600">
<tr>
<th>产品编号</th>
<th>产品名称</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in data">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>
<button ng-click="decr($index)">-</button>
<input type="text" ng-model="item.count" readonly="">
<button ng-click="incr($index)">+</button>
</td>
<td>{{item.price}}</td>
<td>{{item.price*item.count}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
<tr>
<td colspan="6">总金额<span ng-bind="allSum()|currency:'RMB￥'"></span></td>
</tr>
<tr>
<td colspan="4">总数量<span ng-bind="allNum()"></span></td>
<td colspan="2"><button ng-click="qingkong()">清空购物车</button></td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular-1.5.5/angular.js"></script>
<style>
button{
background: red;
}
</style>
<script>
var my=angular.module("my",[]);
my.controller("mys",function ($scope) {
/*随意添加数据*/
$scope.data=[
{name:"iPhone8",count:1,price:"8888"},
{name:"iPhone9",count:1,price:"9888"},
{name:"iPhone2s",count:1,price:"3888"},
{name:"iPhone7p+",count:1,price:"10088"}
]
/*删除一个*/
$scope.del=function (index) {
if(confirm('确定移除此项嘛？')){
$scope.data.splice(index,1);
}
};
//增加
$scope.incr = function(index){
$scope.data[index].count++;
}
//减少
$scope.decr = function(index){
if($scope.data[index].count > 1){
$scope.data[index].count--;
}
}
/*总价格*/
$scope.allSum=function () {
var allPrice=0;
for(var i=0;i<$scope.data.length;i++){
allPrice+=$scope.data[i].price*$scope.data[i].count;
}
return allPrice;
};
/*总个数*/
$scope.allNum=function () {
var allnumber=0;
for(var i=0;i<$scope.data.length;i++){
allnumber+=$scope.data[i].count;
}
return allnumber;
};
/*清空购物车*/
$scope.qingkong=function () {
if($scope.data.length==0){
alert('你的购物车为空');
}else{
$scope.data=[];
}
}
})
</script>
</head>
<body ng-app="my" ng-controller="mys">
<table border="1" width="600">
<tr>
<th>产品编号</th>
<th>产品名称</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in data">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>
<button ng-click="decr($index)">-</button>
<input type="text" ng-model="item.count" readonly="">
<button ng-click="incr($index)">+</button>
</td>
<td>{{item.price}}</td>
<td>{{item.price*item.count}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
<tr>
<td colspan="6">总金额<span ng-bind="allSum()|currency:'RMB￥'"></span></td>
</tr>
<tr>
<td colspan="4">总数量<span ng-bind="allNum()"></span></td>
<td colspan="2"><button ng-click="qingkong()">清空购物车</button></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个技术总监的个人综合评估，希望对大家能有所帮助（转）
- 今天经理让写一个随机加密的密钥，把思路写出来，作为参考，如果那位在这方面有新的尝试，希望能与大家分享
- 分享本人累积多年的java开发视频，希望能够对大家有所帮助！
- 一个Exchange 2010 的password不定期弹框的问题处理，希望对大家可以有所帮助。
- 一个Exchange 2010 的密码不定期弹框的问题处理，希望对大家能够有所帮助。
- 一个简单的脚本验证插件，希望能对大家有所帮助，有demo
- 分享给大家一个比较正规的java坦克大战教学视频，希望对那些想学Java的人有些帮助
- 关于C#更新Access数据库时发现的一个没有任何技术含量的问题，给大家分享，希望能给大家帮助
- 那天在CSDN上看到一个网友在华为遇到的面试题是一道乘法题看似简其实并不是因为它们都超出了数据类型的范围，今天做了下加法希望对大家有所启示
- 实现了一个简单的AS3 MVC框架，希望对大家有所帮助！
- 给大家做了一个关于日程的例子,可以参考一下,对进一步学习有所帮助
- mysql数据库绿色软件制作过程（跟大家分享一下，希望对新手有所帮助）
- 今天开通了自己的CSDN博客，希望大家多帮助我哈
- 这是在开发的时候经常会遇到的问题希望对大家有所帮助
- Linux中许多常用命令是必须掌握的，这里将我学linux入门时学的一些常用的基本命令分享给大家一下，希望可以帮助你们。
- 今天有些失落，给大家分享一篇文章，希望咱们都能以此明心智。
- 单片机 DS1302 痛苦的调试过程，把我的经验教训分享给大家，希望能给后来者一点帮助---二 比一好些
- 多年积累的一些工具希望对大家有所帮助
- 关于exe形式编程的一点心得,希望对大家有所帮助
- Android一个画图的例子，希望对画图初学者有帮助