AngularJs 终极购物车(实例讲解)

2020-11-27 来源：爱站旅游
废话不多说，直接上代码：
<!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 style="color:#660e7a"><strong>arr</strong></span>[<span style="color:#458383">i</span>].<span style="color:#660e7a"><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">
 <h2>我的购物车</h2>
 </div>
 <div class="box1">
 <button ng-click="alldel()" style="margin-right: 10px">清空购物车</button><button ng-click="pi()" style="margin-left: 5px">批量删除</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}}" style="width: 30px;padding-left: 20px"/>
 <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 终极购物车(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
显示全文
全部栏目

AngularJs 终极购物车(实例讲解)
