快捷導(dǎo)航

AngularJs 終極購(gòu)物車(chē)(實(shí)例講解)

更新時(shí)間：2017年11月08日 08:49:25 作者：六一兒童節(jié)

下面小編就為大家?guī)?lái)一篇AngularJs 終極購(gòu)物車(chē)的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

廢話不多說(shuō)，直接上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>購(gòu)物車(chē)</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ù)據(jù)對(duì)象，初始化商品信息，數(shù)據(jù)自擬且不低于四條*/
$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("確定移除此項(xiàng)嘛？")){
          $scope.arr.splice(index,1);
        }
      }
      /*點(diǎn)擊”+”按鈕輸入框中的數(shù)量加1,同時(shí)可以計(jì)算出商品小計(jì),和購(gòu)物 車(chē)總價(jià)*/
$scope.jia=function (index) {
        $scope.arr[index].number++;
      }
      /*當(dāng)點(diǎn)擊”-”按鈕時(shí)輸入框中的數(shù)量減1,商品小計(jì)和總價(jià)*/
$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);
          }
        }
      }
      /*計(jì)算總價(jià)格*/
$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;
      };
      /*清空購(gòu)物車(chē)*/
$scope.alldel=function () {
        if($scope.arr.length==0){
          alert("您的購(gòu)物車(chē)已空");
        }else{
          $scope.arr=[];
        }
      }
      /*用戶點(diǎn)擊第一個(gè)checkbox代表全選，全選商品后點(diǎn)擊刪除選中商品，選中商品被刪除，  若購(gòu)物車(chē)商品被全部刪除后*/
$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;
          }
        }
      };
      /*每個(gè)復(fù)選框*/
$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>我的購(gòu)物車(chē)</h2>
  </div>
  <div class="box1">
    <button ng-click="alldel()" style="margin-right: 10px">清空購(gòu)物車(chē)</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指令將對(duì)象遍歷并渲染到頁(yè)面中-->
<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 終極購(gòu)物車(chē)(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: