用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=)