转自CSDN:<!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"> ???<div class="box"> ???????<h2>我的购物车</h2> ???</div> ???<div class="box1"> ???????<button ng-click="alldel()" style="margin-right: 10px">清空购物车</button><button ng-click="pi()" style="margin-left: 5px">批量删除</button> ???</div> ???<div 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> ???</div></body></html>angular js 终极购物车(转)
原文地址：http://www.cnblogs.com/historylyt/p/7799229.html