购物车的实现有很多方法，本文主要为大家讲解篇angularjs 终极购物车的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
废话不多说，直接上代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>购物车</title>
<script src="angularjs/angular.js"></script>
<style>
.box{
width: 100%;
border-bottom: 1px solid silver;
}
.box1{
width: 100%;
margin-top: 5px;
}
.box1 button{
width: 100px;
height: 40px;
background: crimson;
color: white;
text-align: center;
line-height: 40px;
float: right;
border: 0;
border-radius: 13px;
}
table{
width: 100%;
}
tr td button{
background: blue;
color: white;
border: 0;
}
</style>
<script>
var my=angular.module(my,[]);
my.controller(mys,function ($scope) {
/*声明数据对象，初始化商品信息，数据自拟且不低于四条*/
$scope.arr=[
{name:qq,price:12.9,number:2,state:false},
{name:wx,price:23.9,number:1,state:false},
{name:aa,price:99.9,number:1,state:false},
{name:bb,price:10.9,number:5,state:false}
];
/*删除条目*/
$scope.del=function (index) {
if(confirm(确定移除此项嘛？)){
$scope.arr.splice(index,1);
}
}
/*点击”+”按钮输入框中的数量加1,同时可以计算出商品小计,和购物 车总价*/
$scope.jia=function (index) {
$scope.arr[index].number++;
}
/*当点击”-”按钮时输入框中的数量减1,商品小计和总价*/
$scope.jian=function (index) {
if($scope.arr[index].number>1){
$scope.arr[index].number--;
}
else if($scope.arr[index].number==1){
if(confirm(用户是否删除该商品)){
$scope.arr.splice(index,1);
}
}
}
/*计算总价格*/
$scope.allsum=function () {
var allprice=0;
for(var i=0;i<$scope.arr.length;i++){
allprice+=$scope.<span style="color:#660e7a"><strong>arr</strong></span>[<span style="color:#458383">i</span>].<span style="color:#660e7a"><strong>price</strong></span>*$scope.arr[i].number;
}
return allprice;
};
/*清空购物车*/
$scope.alldel=function () {
if($scope.arr.length==0){
alert(您的购物车已空);
}else{
$scope.arr=[];
}
}
/*用户点击第一个checkbox代表全选，全选商品后点击删除选中商品，选中商品被删除， 若购物车商品被全部删除后*/
$scope.allcheck=false;
$scope.allx= function () {
for(var i=0;i<$scope.arr.length;i++){
if($scope.allcheck==true){
$scope.arr[i].state=true;
}else {
$scope.arr[i].state=false;
}
}
};
/*每个复选框*/
$scope.itemcheck = function () {
var flag = 0;
for(var i = 0; i<$scope.arr.length; i++){
if($scope.arr[i].state == true){
flag ++;
}
}
if(flag == $scope.arr.length){
$scope.allcheck = true;
}else{
$scope.allcheck = false;
}
};
/*批量删除*/
$scope.pi=function () {
for(var i=0;i<$scope.arr.length;i++){
if($scope.arr[i].state==true){
$scope.arr.splice(i,1);
i--;
$scope.allcheck = false;
}
}
}
});
</script>
</head>
<body ng-app="my" ng-controller="mys">
<p class="box">
<h2>我的购物车</h2>
</p>
<p class="box1">
<button ng-click="alldel()" style="margin-right: 10px">清空购物车</button><button ng-click="pi()" style="margin-left: 5px">批量删除</button>
</p>
<p class="box2">
<table border="1">
<tr>
<th><input type="checkbox" ng-model="allcheck" ng-click="allx()"/></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalprice</th>
<th>option</th>
</tr>
<!--用ng-repaet指令将对象遍历并渲染到页面中-->
<tr ng-repeat="item in arr">
<td><input type="checkbox" ng-model="item.state" ng-click="itemcheck()"/></td>
<td>{{item.name}}</td>
<td>{{item.price | currency:￥：}}</td>
<td><button ng-click="jian($index)">-</button>
<input type="text" value="{{item.number}}" style="width: 30px;padding-left: 20px"/>
<button ng-click="jia($index)">+</button>
</td>
<td>{{item.price*item.number | currency:￥：}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
<tr>
<td colspan="6">总金额<span ng-bind="allsum()|currency:'￥：'"></span></td>
</tr>
</table>
</p>
</body>
</html>
相关推荐：
ajax和php session制作购物车实例详解
javascript实现简单的购物车代码实例
mysql实现防止添加购物车重复的代码实例
以上就是angularjs 终极购物车实现方法的详细内容。