【angular面试题】Angular实现可删除并计算总金额的购物车功能示例

【www.bbyears.com--js教程】

本文实例讲述了Angular实现可删除并计算总金额的购物车功能。分享给大家供大家参考，具体如下：

先看运行效果：

具体代码如下：

  
  
  <script src="angular.min.js"></script>
  
  <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>



  
    你的购物车
    
  商品名称
  数量
  单价
  小计
  操作
  
  
    {{arr.gname}}
    {{arr.num}}
    {{arr.price|currency:"RMB￥"}}
    {{arr.num*arr.price|currency:"RMB￥"}}
    删除
  
  
    总金额
  

本文来源：http://www.bbyears.com/wangyezhizuo/144754.html