一聚教程网:一个值得你收藏的教程网站

最新下载

Angular实现可删除并计算总金额的购物车功能示例

时间:2018-01-11 17:01:09 编辑:猪哥 来源:转载

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

先看运行效果:

Angular实现可删除并计算总金额的购物车功能示例

Angular实现可删除并计算总金额的购物车功能示例

Angular实现可删除并计算总金额的购物车功能示例

具体代码如下:




  
  www.jb51.net 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¥"}}
总金额

文章评论

热门栏目