Angular實現(xiàn)可刪除并計算總金額的購物車功能示例

更新時間：2017年12月26日 08:55:55 作者：當愛0201

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

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

先看運行效果：

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dbjr.com.cn angular可刪除與計算總額的購物車</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('確定移除此項嘛？')){
          $scope.goods.splice(index,1);
        }
        if($scope.goods.length==0){
          alter('你的購物車為空');
        }
      };
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
  <tr>
    <td colspan="5">你的購物車</td>
    <tr>
  <td>商品名稱</td>
  <td>數(shù)量</td>
  <td>單價</td>
  <td>小計</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>

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

希望本文所述對大家AngularJS程序設計有所幫助。

您可能感興趣的文章:

angularjs 指令實現(xiàn)自定義滾動條效果
橫向商品欄,把原有的滾動條改成自定義的樣式,并且給兩邊加上箭頭可以調(diào)整,可以拖動商品和滾輪實現(xiàn)滾動條效果,這篇文章主要介紹了angularjs 指令實現(xiàn)自定義滾動條效果,需要的朋友可以參考下
2024-03-03
基于datepicker定義自己的angular時間組件的示例
這篇文章主要介紹了基于datepicker定義自己的angular時間組件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
AngularJS使用ui-route實現(xiàn)多層嵌套路由的示例
這篇文章主要介紹了AngularJS使用ui-route實現(xiàn)多層嵌套路由的示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
這篇文章主要給大家介紹了關于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定參考學習價值，需要的朋友們下面來一起看看吧。
2017-07-07
angularjs中的$eval方法詳解
下面小編就為大家?guī)硪黄猘ngularjs中的$eval方法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
Angular父組件調(diào)用子組件的方法
組件是一種特殊的指令，使用更簡單的配置項來構建基于組件的應用程序架構.這篇文章主要介紹了Angular組件——父組件調(diào)用子組件方法,需要的朋友可以參考下
2018-04-04
關于angular瀏覽器兼容性問題的解決方案
這篇文章主要給大家介紹了關于angular瀏覽器兼容性問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用angular具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2020-07-07
angular學習之從零搭建一個angular4.0項目
本篇文章主要介紹了從零搭建一個angular4.0項目，主要用到的工具angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0)，有興趣的可以了解一下
2017-07-07
AngularJS 防止頁面閃爍的方法
我們知道在應用的頁面或者組件需要加載數(shù)據(jù)時，瀏覽器和angular渲染頁面都需要消耗一定的時間。這篇文章主要介紹了AngularJS 防止頁面閃爍的方法,需要的朋友可以參考下
2017-03-03
詳解AngularJS跨頁面?zhèn)髦担╱i-router）
本篇文章主要介紹了詳解AngularJS跨頁面?zhèn)髦担╱i-router），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08