快捷導(dǎo)航

Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購(gòu)物車(chē)功能示例

更新時(shí)間：2017年12月26日 08:55:55 作者：當(dāng)愛(ài)0201

這篇文章主要介紹了Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購(gòu)物車(chē)功能,涉及AngularJS事件響應(yīng)、元素遍歷與數(shù)值運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購(gòu)物車(chē)功能。分享給大家供大家參考，具體如下：

先看運(yùn)行效果：

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.fzitv.net angular可刪除與計(jì)算總額的購(gòu)物車(chē)</title>
  <script src="angular.min.js"></script>
  <style>
    table{
      width: 500px;
      height: 300px;
      border-collapse: collapse;
      text-align: center;
    }
    td{
      border: 1px solid black;
    }
  </style>
  <script>
    var myapp=angular.module("myapp",[]);
    myapp.controller("myCtrl",function ($scope) {
      $scope.goods=[{
        gname:"iphone8",
        num:"3",
        price:"999"
      },{
        gname: "iphone7",
        num: "4",
        price: "599"
      },{
        gname: "iphone6",
        num: "5",
        price: "499"
      },{
        gname: "iphone5",
        num: "6",
        price: "399"
      }
      ];
      $scope.allSum=function () {
        var allPrice=0;
        for(var i=0;i<$scope.goods.length;i++){
          allPrice+=$scope.goods[i].price*$scope.goods[i].num;
        }
        return allPrice;
      };
      $scope.remove=function (index) {
        if(confirm('確定移除此項(xiàng)嘛？')){
          $scope.goods.splice(index,1);
        }
        if($scope.goods.length==0){
          alter('你的購(gòu)物車(chē)為空');
        }
      };
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
  <tr>
    <td colspan="5">你的購(gòu)物車(chē)</td>
    <tr>
  <td>商品名稱</td>
  <td>數(shù)量</td>
  <td>單價(jià)</td>
  <td>小計(jì)</td>
  <td>操作</td>
  </tr>
  <tr ng-repeat="arr in goods">
    <td>{{arr.gname}}</td>
    <td>{{arr.num}}</td>
    <td>{{arr.price|currency:"RMB￥"}}</td>
    <td>{{arr.num*arr.price|currency:"RMB￥"}}</td>
    <td><button ng-click="remove($index)">刪除</button></td>
  </tr>
  <tr>
    <td colspan="5">總金額<span ng-bind="allSum()|currency:'RMB'"></span></td>
  </tr>
</table>
</body>
</html>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Angularjs處理頁(yè)面閃爍的解決方法
這篇文章主要介紹了Angularjs處理頁(yè)面閃爍的解決方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
對(duì)angular2中的ngfor和ngif指令嵌套實(shí)例講解
今天小編就為大家分享一篇對(duì)angular2中的ngfor和ngif指令嵌套實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
ionic4+angular7+cordova上傳圖片功能的實(shí)例代碼
ionic是一個(gè)垮平臺(tái)開(kāi)發(fā)框架，可通過(guò)web技術(shù)開(kāi)發(fā)出多平臺(tái)的應(yīng)用。這篇文章主要介紹了ionic4+angular7+cordova上傳圖片功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-06-06
AngularJS中的攔截器實(shí)例詳解
這篇文章主要介紹了AngularJS中的攔截器實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-04-04
使用Angular Cli如何創(chuàng)建Angular私有庫(kù)詳解
這篇文章主要給大家介紹了關(guān)于使用Angular Cli如何創(chuàng)建Angular私有庫(kù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-01-01
淺談Angular 中何時(shí)取消訂閱
本篇文章主要介紹了淺談Angular 中何時(shí)取消訂閱，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開(kāi)始先進(jìn)行了簡(jiǎn)單的介紹，而后通過(guò)完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2016-12-12
Angular中使用MathJax遇到的一些問(wèn)題
這篇文章主要給大家介紹了關(guān)于Angular中使用MathJax遇到的一些問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
淺談Angular6的服務(wù)和依賴注入
這篇文章主要介紹了淺談Angular6的服務(wù)和依賴注入，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
Angularjs中三種數(shù)據(jù)的綁定策略(“@”，“=”，“&”)
在AngularJS的指令中存在著三種綁定策略，他們分別是’=’,’@’,’&’。下面這篇文章主要介紹了Angularjs中這三種數(shù)據(jù)的綁定策略，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2016-12-12