Without further ado, just upload the code:
<!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+=$scope.<span style="color:#660e7a"><strong>arr</strong></span>[<span style="color:#458383">i</span>].<span style="color:#660e7a"><strong>price</strong></span>*$[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 article AngularJs Ultimate Shopping Cart (Example Explanation) is all the content I share with you. I hope you can give you a reference and I hope you can support me more.