初入anjularjs，寫一個小小的例子記錄一下。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>angular</title>
<script src="js/angular.min.js"></script>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#wrap{
font-size:16px;
line-height:20px;
padding:20px;
}
.left li{
border: 1px solid ;
height: 80px;
width: 100px;
float:left;
padding:10px;
margin: 10px;
color: blue;
}
.shopcar li{
border: 1px solid gray ;
height: 80px;
width: 100px;
float:left;
padding:10px;
margin: 10px;
color: gray;
}
</style>
</head>
<body>
<div id="wrap" ng-app="myApp" ng-controller="myShowItem">
<div style="overflow:hidden">
<ul class="left">
<li ng-repeat="value in items" >
<p>名稱：{{value.name}}</p>
<p>單價：{{value.price}}</p>
<p>存貨：{{value.shyu}}</p>
<p><a href="" ng-click="addToShopCarList()">購買</a></p>
</li>
</ul>
</div>
<hr />
<p style="color: darkred;">點擊購物車內的商品可以減少購買的商品數量</p>
<div class="shopcar">
<ul style="overflow:hidden;">
<li ng-repeat="value in shopCar" ng-click="DelFromShopCarList()" style="cursor:pointer">
<p>名稱：{{value.name}}</p>
<p>數量：{{value.amount}}</p>
<p>單價：{{value.price}}</p>
<p>總價：{{value.sum}}</p>
</li>
</ul>
<p style="color: red;">商品總價：{{total}} 元</p>
</div>
</div>
<script type="text/javascript">
var item = [
{id : '0',name : '蜂蜜' ,price : 30,shyu : 5},
{id : '1',name : '鼠標' ,price : 39,shyu : 5},
{id : '2',name : '黃豆醬',price : 15,shyu : 5},
{id : '3',name : '護手霜',price : 15,shyu : 5},
{id : '4',name : '保溫杯',price : 29,shyu : 5},
{id : '5',name : '米老頭',price : 18,shyu : 5},
];
var shopCar=[];
var app=angular.module("myApp",[]);
app.controller("myShowItem",function($scope){
$scope.total=0;
$scope.items=item;
$scope.shopCar=shopCar;
$scope.DelFromShopCarList=function(){
$scope.total-=this.value.price; //總價變化
for(var i=0;i<$scope.shopCar.length;i++){
if($scope.shopCar[i].id==this.value.id){
$scope.shopCar[i].amount-=1; //購買數量減1
$scope.items[this.value.id].shyu +=1; //對應存貨加1
if($scope.shopCar[i].amount===0){
$scope.shopCar.splice(i,1); //如果數量爲0 則移出購物車
}
}
}
}
$scope.addToShopCarList=function(){
var item={
name:this.value.name,
price:this.value.price,
id:this.value.id,
amount:1,
sum:this.value.price,
};
var len=shopCar.length;
var inArr=true; //默認購物車沒有此商品
for(var i = 0;i < len; i++){
if(shopCar[i].id===this.value.id){
inArr=false;
if($scope.items[this.value.id].shyu == 0){ //判斷是否還有存貨
alert($scope.items[this.value.id].name + '已賣完!');
}else{
shopCar[i].amount+=1; //購買數量加1
shopCar[i].sum = shopCar[i].price*shopCar[i].amount; //單類商品總和
$scope.items[this.value.id].shyu -= 1; //存貨減1
break;
}
}
}
if(inArr){
shopCar.push(item); //在購物車加入該商品
$scope.items[this.value.id].shyu -= 1; //存貨減1
}
$scope.total+=shopCar[i].price; //總價變化
}
})
</script>
</body>
</html>
下面運行結果：（沒有css細胞，見諒。。。）
新人入坑，老手勿噴。