初学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元素里的时候,就正常显示了。