初學angularJS，自己做一個簡單的demo玩一下。
購物車界面：(1)能顯示商品基本信息； (2)能對購買數量進行修改；
(3)能夠刪除不想購買的商品； (4)能夠自動計算購買數量和總金額
1. pay.html 購物車界面代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的購物車</title>
<link href="bootstrap/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="angularJS/angular.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<style type="text/css">
table input{ text-align:center; width:30%; }
.div_emptyFont{ font-size:40px; color:#999; margin-top:100px; }
</style>
<body>
<div ng-app="myApp" ng-controller="myController" class="container">
<table class="table" ng-show="cart.length">
<thead>
<tr><th>編號</th><th>商品名稱</th><th>購買數量</th>
<th>單價</th><th>總價</th><th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cart">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<button type="button" class="btn btn-primary" ng-click="reduceQuantity(item)">-</button>
<input type="text" value="" ng-model="item.quantity" />
<button type="button" class="btn btn-primary" ng-click="addQuantity(item)">+</button>
</td>
<td>{{item.price}}</td>
<td>{{item.quantity*item.price}}</td>
<td><button type="button" class=" btn btn-danger" ng-click="remove(item.id)" >移除</button></td>
</tr>
<tr>
<td>購物總價</td>
<td>{{totalPrice()}}</td>
<td>購買總數量</td>
<td>{{totalQuantity()}}</td>
<td colspan="2">
<button type="button" class="btn btn-danger" ng-click="cart={}">全部清空</button>
</td>
</tr>
</tbody>
</table>
<div ng-show="!cart.length" class="div_emptyFont" >
此處空空如也。。。。。。
</div>
</div>
</body>
</html>
2. index.js 數據獲取和事件處理
var app = angular.module("myApp",[]);
app.controller("myController",function($scope){
$scope.cart=[
{ id:1001,
name:'ipone4s',
quantity:2,
price:3000
},
{ id:1023,
name:'小米note',
quantity:5,
price:3999
},
{ id:561,
name:'特步跑鞋',
quantity:2,
price:700
},
{ id:66,
name:'李寧羽毛球拍',
quantity:2,
price:562
},
{ id:4321,
name:'ipone7s',
quantity:2,
price:5000
},
];
/**購物總價**/
$scope.totalPrice=function()
{
var total=0;
angular.forEach($scope.cart,function(item){
total+=item.quantity*item.price;
});
return total;
};
/**計算購買總數量**/
$scope.totalQuantity=function()
{
var total=0;
angular.forEach($scope.cart,function(item){
total+=parseInt(item.quantity);
});
return total;
};
/**找一個元素的索引**/
var findIndex=function(id)
{
var index=-1;
angular.forEach($scope.cart,function(item,key){
if(item.id === id)
{
index=key;
}
});
return index;
}
/**移除商品**/
$scope.remove=function(id){
//alert(id);
//**找出該id對應的索引
var index=findIndex(id);
alert(index);
if(index !== -1)
{
$scope.cart.splice(index,1);
}
}
/**全部清空購物車**/
//即， 使cart變爲空
/**添加購買數量**/
$scope.addQuantity=function(item){
++item.quantity;
}
/**減少購買數量**/
$scope.reduceQuantity=function(item){
if( item.quantity > 1)
{
--item.quantity;
}
else{
var returnKey=confirm('是否要移除該商品！！！');
if(returnKey)
{
$scope.remove(item.id);
}
}
}
$scope.$watch('cart',function(newValue,oldValue)
{
angular.forEach(newValue,function(item,key){
if(item.quantity < 1)
{
var returnKey=confirm('是否從購物車中移除？？');
if(returnKey)
$scope.remove(item.id);
else
item.quantity=oldValue[key].quantity;
}
});
});
});
3. 界面效果
這個較爲簡單，只是引用了angular JS做數據渲染以及事件操作，相比自己純手寫JS來處理要輕鬆得多。bootstrap用來處理界面佈局和樣式選擇上。這個demo扔有很多改進的地方，我在這裏主要就是記錄一下我今天用angular JS如何渲染數據以及遇上的一點小問題。
（1）.我將 ng-app寫在body元素裏面了：<body ng-app>，這個單獨用沒問題，但是我放入我的web項目中，瀏覽器訪問tomcat，打開該頁面時瀏覽器出現警告
這就導致了數據無法渲染到界面，其實就是angular的控制器沒有起作用。所以當我將 ng-app放在DIV元素裏的時候，就正常顯示了。
