The examples in this article share the specific code of the shopping cart function for your reference. The specific content is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shopping cart</title>
<script src="angularjs/"></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=("my",[]);
("mys",function ($scope) {
/*Declare the data object, initialize product information, and write the data automatically and no less than four items*/
$=[
{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}
];
/*Delete entry*/
$=function (index) {
if(confirm("Are you sure you remove this item?")){
$(index,1);
}
}
/*Click the "+" button to add 1 to the number in the input box, and you can calculate the subtotal of the product and the total price of the shopping cart*/
$=function (index) {
$[index].number++;
}
/* When clicking the "-" button, the quantity in the input box is reduced by 1, the product subtotal and total price*/
$=function (index) {
if($[index].number>1){
$[index].number--;
}
else if($[index].number==1){
if(confirm("Does the user delete the product?")){
$(index,1);
}
}
}
/*Calculate total price*/
$=function () {
var allPrice=0;
for(var i=0;i<$;i++){
allPrice+=$[i].price*$[i].number;
}
return allPrice;
};
/*Clear the shopping cart*/
$=function () {
if($==0){
alert("Your shopping cart is empty");
}else{
$=[];
}
}
/*The user clicks the first checkbox to represent the selection of all. After selecting all the products, click to delete the selected products. The selected products will be deleted. If all the products in the shopping cart are deleted*/
$=false;
$= function () {
for(var i=0;i<$;i++){
if($==true){
$[i].state=true;
}else {
$[i].state=false;
}
}
};
/*Each check box*/
$ = function () {
var flag = 0;
for(var i = 0; i<$; i++){
if($[i].state == true){
flag ++;
}
}
if(flag == $){
$ = true;
}else{
$ = false;
}
};
/*Batch Delete*/
$=function () {
for(var i=0;i<$;i++){
if($[i].state==true){
$(i,1);
i--;
$ = false;
}
}
}
});
</script>
</head>
<body ng-app="my" ng-controller="mys">
<div class="box">
<h2>我的Shopping cart</h2>
</div>
<div class="box1">
<button ng-click="alldel()" style="margin-right: 10px">清空Shopping cart</button><button ng-click="pi()" style="margin-left: 5px">Batch Delete</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>
<!--useng-repaetDirective traversal and render objects to the page-->
<tr ng-repeat="item in arr">
<td><input type="checkbox" ng-model="" ng-click="itemCheck()"/></td>
<td>{{}}</td>
<td>{{ | currency:"￥："}}</td>
<td><button ng-click="jian($index)">-</button>
<input type="text" value="{{}}" style="width: 30px;padding-left: 20px"/>
<button ng-click="jia($index)">+</button>
</td>
<td>{{* | currency:"￥："}}</td>
<td><button ng-click="del($index)">delete</button></td>
</tr>
<tr>
<td colspan="6">lump sum<span ng-bind="allSum()|currency:'￥：'"></span></td>
</tr>
</table>
</div>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.