表格过滤添加信息和删除计算价格

yedaiyang

于 2017-12-12 19:31:20 发布

阅读量906

点赞数

本文链接：https://blog.csdn.net/yedaiyang/article/details/78785200

版权

<body ng-app="myApp" ng-controller="myCtrl">
你的购物车<br />
<table border="1px" cellspacing="0px" cellpadding="0px" ng-hide="a">
  <tr>
   <th>商品名称</th>
   <th>商品数量</th>
   <th>商品单价</th>
   <th>商品小计</th>
  </tr>
  
  <tr ng-repeat="g in goods">
   <td>{{g.gname}}</td>
   <td>{{g.gcount}}</td>
   <td>{{g.gprice|currency:"RMB￥"}}</td>
   <td>{{g.gcount*g.gprice|currency:"RMB￥"}}</td>
   <td><input type="button" value="删除" ng-click="dele($index)"></td>
  </tr>
</table>
<span>
  总金额:{{sum}}
</span>

<script>
  var mo = angular.module("myApp",[]);
  mo.controller("myCtrl",function($scope){
  /* 添加信息*/
   $scope.goods = [
   {
    gname:"鼠标",
    gcount:15,
    gprice:100,
   },{
    gname:"键盘",
    gcount:10,
    gprice:300,
   },{
    gname:"主机",
    gcount:3,
    gprice:2500,
   },{
    gname:"显示器",
    gcount:5,
    gprice:800,
   }
   ];
   /*计算总价的方法*/
   zj();
   function zj(){
    $scope.sum = 0;
    for(var i=0;i<$scope.goods.length;i++){
     $scope.sum+= $scope.goods[i].gcount*$scope.goods[i].gprice;
    }
   };
   /*删除的方法*/
   $scope.dele = function($index){
    $scope.goods.splice($index,1);
    zj();
    if($scope.goods.length==0){
     $scope.a = true
     alert("购物车为空");
    }
   }
  });
</script>
</body>

yedaiyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格过滤添加信息和删除计算价格

你的购物车商品名称商品数量商品单价商品小计 {{g.gname}} {{g.gcount}} {{g.gprice|currency:"RMB￥"}} {{g.gcount*g.gprice|currency:"RMB￥"}} 总金额:{{sum}}
复制链接

扫一扫