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) {
 /*聲明數(shù)據對象，初始化商品信息，數(shù)據自擬且不低于四條*/
$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);
 }
 }
 /*點擊”+”按鈕輸入框中的數(shù)量加1,同時可以計算出商品小計,和購物 車總價*/
$scope.jia=function (index) {
 $scope.arr[index].number++;
 }
 /*當點擊”-”按鈕時輸入框中的數(shù)量減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 終極購物車(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

AngularJs 終極購物車(實例講解)