有bootstrap 框架及angular 引入即可
对于初学angular者练手双向绑定最合适,
话不多说直接上代码
复制粘贴即可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="cartController">
<div class="container">
// 两个输入框可根据条件搜索
<input type="text" ng-model="filterData">
<input type="text" ng-model="filterType">
<button class="btn btn-default btn-sm">🔍</button>
<table class="table" ng-show="cart.length">
<thead>
<tr>
<th ng-class="{dropup:order !=''}" ng-click="changeOrder('id')">产品编号<span class="caret"></span></th>
<th>产品名字</th>
<th>产品数量</th>
<th ng-class="{dropup:order !=''}" ng-click="changeOrder('price')">产品单价<span class="caret"></span></th>
<th>产品总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cart | filter:filterType | filter:filterData | orderBy:order + orderType">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<button class="btn btn-primary" ng-click="reduce(item.id)">-</button>
<input type="text" ng-model="item.quantity">
<button class="btn btn-primary" ng-click="add(item.id)">+</button>
</td>
<td>{{item.price}}</td>
<td>{{item.quantity * item.price}}</td>
<td>
<button class="btn btn-danger" ng-click="remove(item.id)">移除</button>
</td>
</tr>
<tr>
<td>购买总价{{totalPrice()}}</td>
<td>购买数量{{totalQuantity()}}</td>
<td></td>
<td></td>
<td></td>
<td><button class="btn btn-danger" ng-click="cart = [];">清空购物车</button></td>
</tr>
</tbody>
</table>
<p ng-show="!cart.length">您的购物车为空</p>
</div>
</body>
<script>
var app = angular.module("myApp" , []);
app.controller("cartController" , function ($scope) {
$scope.filterType = "";
$scope.filterData = "";
// 控制器升序还是降序
$scope.order = '';
//按照哪一个字段进行排序
$scope.orderType = '';
$scope.cart = [
{
id:1000 ,
name:"iPhone6" ,
quantity:3 ,
price:3300
} ,
{
id:1002 ,
name:"iPhone6s" ,
quantity:3 ,
price:4300
} ,
{
id:1003 ,
name:"iPhone7s" ,
quantity:4 ,
price:3600
} ,
{
id:1005 ,
name:"p10" ,
quantity:2 ,
price:3000
} ,
{
id:1009 ,
name:"小米6" ,
quantity:1 ,
price:1010
} ,
{
id:1010 ,
name:"三星s8" ,
quantity:6 ,
price:4100
}
];
// 计算购物总价的方法
$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;
}
// 移除按钮事件
$scope.remove = function (id) {
// alert(id);
var index = getIndex(id);
if(index != -1){
$scope.cart.splice(index , 1);
}
}
// 根据id寻找index下标
function getIndex(id) {
var index = -1;
angular.forEach($scope.cart , function (item , key) {
if(item.id == id) {
index = key;
}
});
return index;
}
// 增加某一个产品的数量
$scope.add = function (id) {
var index = getIndex(id);
++$scope.cart[index].quantity;
}
// 减少某一个产品的数量
$scope.reduce = function (id) {
var index = getIndex(id);
var item = $scope.cart[index];
if(item.quantity > 1){
--item.quantity;
} else {
var returnKey = confirm("确定从购物车中删除该商品?");
if(returnKey){
$scope.remove(id);
}
}
}
// 为了防止输入的产品数量过少
// 我们要做一个监听
$scope.$watch("cart" , function (newValue , oldValue) {
angular.forEach(newValue , function (item , key) {
if(item.quantity <= 0){
var returnKey = confirm("确定从购物车中删除该商品?");
if(returnKey){
$scope.remove(item.id);
}
}
});
} , true);
// 改变排序顺序
$scope.changeOrder = function (type) {
$scope.orderType = type;
if($scope.order ==""){
$scope.order = "-";
}else{
$scope.order = "";
}
}
});
</script>
<script src="bootstrap.min.js"></script>
</html>
