用AngularJS实现购物车，具体代码如下：
<code><!DOCTYPE html></code>
<code><</code><code>html</code> <code>ng-app</code><code>=</code><code>"app"</code><code>></code>
<code><</code><code>head</code><code>></code>
<code> </code><code><</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>></code>
<code> </code><code><</code><code>link</code> <code>href</code><code>=</code><code>"http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>></code>
<code> </code><code><</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>></code>
<code> </code><code>body {</code>
<code> </code><code>font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;</code>
<code> </code><code>}</code>
<code> </code><code></</code><code>style</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"container"</code> <code>ng-controller</code><code>=</code><code>"firstController"</code><code>></code>
<code> </code><code><</code><code>table</code> <code>class</code><code>=</code><code>"table"</code><code>></code>
<code> </code><code><</code><code>thead</code><code>></code>
<code> </code><code><</code><code>tr</code><code>></code>
<code> </code><code><</code><code>th</code><code>>产品编号</</code><code>th</code><code>></code>
<code> </code><code><</code><code>th</code><code>>产品名称</</code><code>th</code><code>></code>
<code> </code><code><</code><code>th</code><code>>购买数量</</code><code>th</code><code>></code>
<code> </code><code><</code><code>th</code><code>>产品单价</</code><code>th</code><code>></code>
<code> </code><code><</code><code>th</code><code>>产品总价</</code><code>th</code><code>></code>
<code> </code><code><</code><code>th</code><code>>操作</</code><code>th</code><code>></code>
<code> </code><code></</code><code>tr</code><code>></code>
<code> </code><code></</code><code>thead</code><code>></code>
<code> </code><code><</code><code>tbody</code><code>></code>
<code> </code><code><</code><code>tr</code> <code>ng-repeat</code><code>=</code><code>"item in Product"</code><code>></code>
<code> </code><code><</code><code>td</code><code>>`item`.`id`</</code><code>td</code><code>></code>
<code> </code><code><</code><code>td</code><code>>`item`.`name`</</code><code>td</code><code>></code>
<code> </code><code><</code><code>td</code><code>></code>
<code> </code><code><</code><code>button</code> <code>type</code><code>=</code><code>"button"</code> <code>class</code><code>=</code><code>"btn"</code> <code>ng-click</code><code>=</code><code>"reduce($index)"</code><code>>-</</code><code>button</code><code>></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>""</code> <code>value</code><code>=</code><code>""</code> <code>placeholder</code><code>=</code><code>""</code> <code>ng-model</code><code>=</code><code>"item.quantity"</code><code>></code>
<code> </code><code><</code><code>button</code> <code>type</code><code>=</code><code>"button"</code> <code>class</code><code>=</code><code>"btn"</code> <code>ng-click</code><code>=</code><code>"add($index)"</code><code>>+</</code><code>button</code><code>></code>
<code> </code><code></</code><code>td</code><code>></code>
<code> </code><code><</code><code>td</code><code>>`item`.`price`</</code><code>td</code><code>></code>
<code> </code><code><</code><code>td</code><code>>{{item.quantity*item.price}}</</code><code>td</code><code>></code>
<code> </code><code><</code><code>button</code> <code>type</code><code>=</code><code>"button"</code> <code>class</code><code>=</code><code>"btn btn-danger"</code> <code>ng-click</code><code>=</code><code>"remove($index)"</code><code>>移除</</code><code>button</code><code>></code>
<code> </code><code><</code><code>td</code><code>>总价格：{{totalPrice()}} 元</</code><code>td</code><code>></code>
<code> </code><code><</code><code>td</code> <code>colspan</code><code>=</code><code>"4"</code><code>>总购买数：{{totalQuantity()}}</</code><code>td</code><code>></code>
<code> </code><code><</code><code>button</code> <code>type</code><code>=</code><code>"button"</code> <code>class</code><code>=</code><code>"btn btn-danger"</code> <code>ng-click</code><code>=</code><code>"removeall()"</code><code>>清空购物车</</code><code>button</code><code>></code>
<code> </code><code></</code><code>tbody</code><code>></code>
<code> </code><code></</code><code>table</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"</code><code>></</code><code>script</code><code>></code>
<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>
<code> </code><code>angular.module('app', []).controller('firstController',</code>
<code> </code><code>function($scope) {</code>
<code> </code><code>$scope.Product = [{</code>
<code> </code><code>id: 1000,</code>
<code> </code><code>name: "iPhone 6 Plus",</code>
<code> </code><code>quantity: 1,</code>
<code> </code><code>price: 6888</code>
<code> </code><code>}, {</code>
<code> </code><code>id: 1001,</code>
<code> </code><code>name: "iPhone 6",</code>
<code> </code><code>price: 5288</code>
<code> </code><code>id: 1002,</code>
<code> </code><code>name: "iPhone 5s",</code>
<code> </code><code>price: 4188</code>
<code> </code><code>id: 1003,</code>
<code> </code><code>name: "iPhone 5c",</code>
<code> </code><code>price: 3288</code>
<code> </code><code>}];</code>
<code> </code><code>$scope.totalPrice = function() {</code>
<code> </code><code>var total = 0;</code>
<code> </code><code>angular.forEach($scope.Product, function(item) {</code>
<code> </code><code>total += item.quantity * item.price;</code>
<code> </code><code>});</code>
<code> </code><code>return total;</code>
<code> </code><code>}</code>
<code> </code><code>$scope.totalQuantity = function() {</code>
<code> </code><code>total += parseInt(item.quantity);</code>
<code> </code><code>$scope.remove = function(index) {</code>
<code> </code><code>$scope.Product.splice(index, 1);</code>
<code> </code><code>$scope.removeall = function() {</code>
<code> </code><code>var index;</code>
<code> </code><code>for (index = $scope.Product.length - 1; index >= 0; index--) {</code>
<code> </code><code>$scope.remove(index);</code>
<code> </code><code>}</code>
<code> </code><code>$scope.reduce = function(index) {</code>
<code> </code><code>if ($scope.Product[index].quantity != 1) {</code>
<code> </code><code>$scope.Product[index].quantity--;</code>
<code> </code><code>} else {</code>
<code> </code><code>var ans = confirm("是否移除该产品？");</code>
<code> </code><code>if (ans) {</code>
<code> </code><code>$scope.remove(index);</code>
<code> </code><code>} else {</code>
<code> </code><code>$scope.Product[index].quantity = 1;</code>
<code> </code><code>}</code>
<code> </code><code>$scope.add = function(index) {</code>
<code> </code><code>$scope.Product[index].quantity++;</code>
<code> </code><code>$scope.$watch('Product', function(newValue, oldValue) {</code>
<code> </code><code>angular.forEach(newValue, function(item, key) {</code>
<code> </code><code>if (item.quantity < 1) {</code>
<code> </code><code>var ans = confirm("是否移除该产品？");</code>
<code> </code><code>if (ans) {</code>
<code> </code><code>$scope.remove(key);</code>
<code> </code><code>} else {</code>
<code> </code><code>item.quantity = oldValue[key].quantity;</code>
<code> </code><code>}</code>
<code> </code><code>return;</code>
<code> </code><code>}, true);</code>
<code> </code><code>});</code>
<code> </code><code></</code><code>script</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
ng-repeat实现循环，ng-click后面接点击后触发的事件，firstController内几个函数是自己写的。
这里实现了购物车商品的增减，总价和件数随之变化，商品可以移除，购物车可以清空。
本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1659190，如需转载请自行联系原作者
![详解SQL中几种常用的表连接方式[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)