<!DOCTYPE html>
<html ng-app>
<head>
<title> New Document </title>
<script type="text/javascript" src="angular.js"></script>
</head>
<body ng-controller='CartController'>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'/>
<span>{{item.quantity}}</span>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">remove</button>
</div>
<div>总共：{{totalCart() | currency}}</div>
<script type="text/javascript">
function CartController($scope){
$scope.items=[
{title:'海尔冰箱',quantity:8,price:3.95},
{title:'长虹电视',quantity:8,price:3.95},
{title:'电饭锅',quantity:8,price:3.95}
];
$scope.remove=function(index){
$scope.items.splice(index,1);
}
$scope.totalCart=function(){
var total = 0;
for(var i=0;i<$scope.items.length;i++){
total = total + $scope.items[i].price*$scope.items[i].quantity
}
return total;
};
}
</script>
</body>
</html>
分享到：
相关推荐
AngularJS购物车商品数量加减计算代码 不错的AngularJS例子
SpringMVC+angularjs 购物车页面
AngularJS购物车商品数量加减计算代码基于AngularJS1.2.32制作，购物车商品增加、减少、移除、数量计算结算代码。
Android 仿外卖购物车Demo，文章详解链接：http://blog.csdn.net/wenwins/article/details/51579463
KarmYoga, 准备使用所有功能的AngularJS购物车 KarmYoga.Com免费电子商务咨询和电子商务开发平台。 KarmYoga.Com - 免费电子商务咨询和电子商务开发平台。 我专注于让人们从他们的日常生活中获得更多的收益。 我们...
HTML+CSS+JS手机端购物车demo,获取json数据实例，使用vue渲染列表，样式随便写的
用iOS技术实现购物车，用iOS技术实现购物车，用iOS技术实现购物车
一个用vue.js做的购物车小demo，可根据自身需要进行增加删除修改等
Android ExpandableListView 实现购物车页面 全选 多选 单选 编辑删除
ios购物车demo，涵盖了全选，部分全选，以及过期商品
AngularJS购物车商品数量加减计算代码基于AngularJS1.2.32制作，购物车商品增加、减少、移除、数量计算结算代码。
主要介绍了Angularjs 制作购物车功能实例代码的相关资料,并附示例代码，需要的朋友可以参考下
Android端仿实现美团、饿了么购物车效果demo，并本地存储相关数据
卡特化 基于localstorage的angularjs购物车系统
仿京东购物车demo，详情请看Git上的代码，会不断完善。
此代码主要是区别采用代理传值，根据不同的用户选择不同的情况来进行相应的操作；作者也是个菜鸟，希望各位码友提供好的建议，谢谢！！！
下面小编就为大家带来一篇AngularJS 购物车全选/取消全选功能的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序购物车DEMO(SeptemberMaples/wechat-weapp-demo)