初入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细胞，见谅。。。）
新人入坑，老手勿喷。