溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關AngularJs如何實現購物車的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購物車</title>
<script src="angularjs/angular.js"></script>
<style>
.box{
width: 100%;
border-bottom: 1px solid silver;
}
.box1{
width: 100%;
margin-top: 5px;
}
.box1 button{
width: 100px;
height: 40px;
background: crimson;
color: white;
text-align: center;
line-height: 40px;
float: right;
border: 0;
border-radius: 13px;
}
table{
width: 100%;
}
tr td button{
background: blue;
color: white;
border: 0;
}
</style>
<script>
var my=angular.module("my",[]);
my.controller("mys",function ($scope) {
/*聲明數據對象，初始化商品信息，數據自擬且不低于四條*/
$scope.arr=[
{name:"qq",price:12.9,number:2,state:false},
{name:"wx",price:23.9,number:1,state:false},
{name:"aa",price:99.9,number:1,state:false},
{name:"bb",price:10.9,number:5,state:false}
];
/*刪除條目*/
$scope.del=function (index) {
if(confirm("確定移除此項嘛？")){
$scope.arr.splice(index,1);
}
}
/*點擊”+”按鈕輸入框中的數量加1,同時可以計算出商品小計,和購物 車總價*/
$scope.jia=function (index) {
$scope.arr[index].number++;
}
/*當點擊”-”按鈕時輸入框中的數量減1,商品小計和總價*/
$scope.jian=function (index) {
if($scope.arr[index].number>1){
$scope.arr[index].number--;
}
else if($scope.arr[index].number==1){
if(confirm("用戶是否刪除該商品")){
$scope.arr.splice(index,1);
}
}
}
/*計算總價格*/
$scope.allSum=function () {
var allPrice=0;
for(var i=0;i<$scope.arr.length;i++){
allPrice+=$scope.<span ><strong>arr</strong></span>[<span >i</span>].<span ><strong>price</strong></span>*$scope.arr[i].number;
}
return allPrice;
};
/*清空購物車*/
$scope.alldel=function () {
if($scope.arr.length==0){
alert("您的購物車已空");
}else{
$scope.arr=[];
}
}
/*用戶點擊第一個checkbox代表全選，全選商品后點擊刪除選中商品，選中商品被刪除， 若購物車商品被全部刪除后*/
$scope.allCheck=false;
$scope.allx= function () {
for(var i=0;i<$scope.arr.length;i++){
if($scope.allCheck==true){
$scope.arr[i].state=true;
}else {
$scope.arr[i].state=false;
}
}
};
/*每個復選框*/
$scope.itemCheck = function () {
var flag = 0;
for(var i = 0; i<$scope.arr.length; i++){
if($scope.arr[i].state == true){
flag ++;
}
}
if(flag == $scope.arr.length){
$scope.allCheck = true;
}else{
$scope.allCheck = false;
}
};
/*批量刪除*/
$scope.pi=function () {
for(var i=0;i<$scope.arr.length;i++){
if($scope.arr[i].state==true){
$scope.arr.splice(i,1);
i--;
$scope.allCheck = false;
}
}
}
});
</script>
</head>
<body ng-app="my" ng-controller="mys">
<div class="box">
<h3>我的購物車</h3>
</div>
<div class="box1">
<button ng-click="alldel()" >清空購物車</button><button ng-click="pi()" >批量刪除</button>
</div>
<div class="box2">
<table border="1">
<tr>
<th><input type="checkbox" ng-model="allCheck" ng-click="allx()"/></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
<!--用ng-repaet指令將對象遍歷并渲染到頁面中-->
<tr ng-repeat="item in arr">
<td><input type="checkbox" ng-model="item.state" ng-click="itemCheck()"/></td>
<td>{{item.name}}</td>
<td>{{item.price | currency:"￥："}}</td>
<td><button ng-click="jian($index)">-</button>
<input type="text" value="{{item.number}}" />
<button ng-click="jia($index)">+</button>
</td>
<td>{{item.price*item.number | currency:"￥："}}</td>
<td><button ng-click="del($index)">刪除</button></td>
</tr>
<tr>
<td colspan="6">總金額<span ng-bind="allSum()|currency:'￥：'"></span></td>
</tr>
</table>
</div>
</body>
</html>感謝各位的閱讀！關于“AngularJs如何實現購物車”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
