有bootstrap 框架及angular 引入即可
對(duì)于初學(xué)angular者練手雙向綁定最合適,
話不多說(shuō)直接上代碼
復(fù)制粘貼即可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link 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">
// 兩個(gè)輸入框可根據(jù)條件搜索
<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')">產(chǎn)品編號(hào)<span class="caret"></span></th>
<th>產(chǎn)品名字</th>
<th>產(chǎn)品數(shù)量</th>
<th ng-class="{dropup:order !=''}" ng-click="changeOrder('price')">產(chǎn)品單價(jià)<span class="caret"></span></th>
<th>產(chǎn)品總價(jià)</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>購(gòu)買(mǎi)總價(jià){{totalPrice()}}</td>
<td>購(gòu)買(mǎi)數(shù)量{{totalQuantity()}}</td>
<td></td>
<td></td>
<td></td>
<td><button class="btn btn-danger" ng-click="cart = [];">清空購(gòu)物車(chē)</button></td>
</tr>
</tbody>
</table>
<p ng-show="!cart.length">您的購(gòu)物車(chē)為空</p>
</div>
</body>
<script>
var app = angular.module("myApp" , []);
app.controller("cartController" , function ($scope) {
$scope.filterType = "";
$scope.filterData = "";
// 控制器升序還是降序
$scope.order = '';
//按照哪一個(gè)字段進(jìn)行排序
$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
}
];
// 計(jì)算購(gòu)物總價(jià)的方法
$scope.totalPrice = function () {
var total = 0;
angular.forEach($scope.cart , function (item) {
total += item.quantity * item.price;
});
return total;
}
// 計(jì)算購(gòu)物總數(shù)量
$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);
}
}
// 根據(jù)id尋找index下標(biāo)
function getIndex(id) {
var index = -1;
angular.forEach($scope.cart , function (item , key) {
if(item.id == id) {
index = key;
}
});
return index;
}
// 增加某一個(gè)產(chǎn)品的數(shù)量
$scope.add = function (id) {
var index = getIndex(id);
++$scope.cart[index].quantity;
}
// 減少某一個(gè)產(chǎn)品的數(shù)量
$scope.reduce = function (id) {
var index = getIndex(id);
var item = $scope.cart[index];
if(item.quantity > 1){
--item.quantity;
} else {
var returnKey = confirm("確定從購(gòu)物車(chē)中刪除該商品?");
if(returnKey){
$scope.remove(id);
}
}
}
// 為了防止輸入的產(chǎn)品數(shù)量過(guò)少
// 我們要做一個(gè)監(jiān)聽(tīng)
$scope.$watch("cart" , function (newValue , oldValue) {
angular.forEach(newValue , function (item , key) {
if(item.quantity <= 0){
var returnKey = confirm("確定從購(gòu)物車(chē)中刪除該商品?");
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>
