标签：angularjs 购物车 angular ng-repeat ng-click
用AngularJS实现购物车，具体代码如下：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
}
</style>
</head>
<body>
<div class="container" ng-controller="firstController">
<table class="table">
<thead>
<tr>
<th>产品编号</th>
<th>产品名称</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Product">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<button type="button" class="btn" ng-click="reduce($index)">-</button>
<input type="text" name="" value="" placeholder="" ng-model="item.quantity">
<button type="button" class="btn" ng-click="add($index)">+</button>
</td>
<td>{{item.price}}</td>
<td>{{item.quantity*item.price}}</td>
<td>
<button type="button" class="btn btn-danger" ng-click="remove($index)">移除</button>
</td>
</tr>
<tr>
<td>总价格：{{totalPrice()}} 元</td>
<td colspan="4">总购买数：{{totalQuantity()}}</td>
<td>
<button type="button" class="btn btn-danger" ng-click="removeall()">清空购物车</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script>
<script type="text/javascript">
angular.module(‘app‘, []).controller(‘firstController‘,
function($scope) {
$scope.Product = [{
id: 1000,
name: "iPhone 6 Plus",
quantity: 1,
price: 6888
}, {
id: 1001,
name: "iPhone 6",
quantity: 1,
price: 5288
}, {
id: 1002,
name: "iPhone 5s",
quantity: 1,
price: 4188
}, {
id: 1003,
name: "iPhone 5c",
quantity: 1,
price: 3288
}];
$scope.totalPrice = function() {
var total = 0;
angular.forEach($scope.Product, function(item) {
total += item.quantity * item.price;
});
return total;
}
$scope.totalQuantity = function() {
var total = 0;
angular.forEach($scope.Product, function(item) {
total += parseInt(item.quantity);
});
return total;
}
$scope.remove = function(index) {
$scope.Product.splice(index, 1);
}
$scope.removeall = function() {
var index;
for (index = $scope.Product.length - 1; index >= 0; index--) {
$scope.remove(index);
}
}
$scope.reduce = function(index) {
if ($scope.Product[index].quantity != 1) {
$scope.Product[index].quantity--;
} else {
var ans = confirm("是否移除该产品？");
if (ans) {
$scope.remove(index);
} else {
$scope.Product[index].quantity = 1;
}
}
}
$scope.add = function(index) {
$scope.Product[index].quantity++;
}
$scope.$watch(‘Product‘, function(newValue, oldValue) {
angular.forEach(newValue, function(item, key) {
if (item.quantity < 1) {
var ans = confirm("是否移除该产品？");
if (ans) {
$scope.remove(key);
} else {
item.quantity = oldValue[key].quantity;
}
return;
}
});
}, true);
});
</script>
</body>
</html> ng-repeat实现循环，ng-click后面接点击后触发的事件，firstController内几个函数是自己写的。
这里实现了购物车商品的增减，总价和件数随之变化，商品可以移除，购物车可以清空。
本文出自 “柚汁前端” 博客，请务必保留此出处http://iampomelo.blog.51cto.com/10193513/1659190
标签：angularjs 购物车 angular ng-repeat ng-click
原文地址：http://iampomelo.blog.51cto.com/10193513/1659190
