angularjs遍历集合添加值表格进行删除

最新推荐文章于 2022-07-10 12:13:36 发布

kybkq111

最新推荐文章于 2022-07-10 12:13:36 发布

阅读量1.3k

点赞数

分类专栏：常用

本文链接：https://blog.csdn.net/kybkq1314/article/details/78533697

版权

常用专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../kuwenjian/angular.js" ></script>
		<script>
			var app = angular.module("myapp" , []);
			app.controller("mycon" , function($scope){
				
				$scope.a="我是哈哈哈";
				$scope.money=101;
				$scope.delete=function(index){
					$scope.goods.splice(index,1);
					$scope.zje=0;
				
				for(inde in $scope.goods){
					var ww = $scope.goods[inde].num * $scope.goods[inde].price;
					$scope.zje=ww+$scope.zje;
				}
				}
				
				$scope.goods=[{
					name:"鼠标",
					num:1,
					price:101
				},{
					name:"键盘",
					num:3,
					price:601
				},{
					name:"主机",
					num:1,
					price:3001
				}];
				
				$scope.isShow = function(){
					if($scope.goods.length>0){
						return true;
					}else{
						return false;
					}
				}
				
				$scope.zje=0;
				
				for(inde in $scope.goods){
					var ww = $scope.goods[inde].num * $scope.goods[inde].price;
					$scope.zje=ww+$scope.zje;
				}
			});
			
			
		</script>
	</head>
	<body ng-app="myapp" ng-controller="mycon">
		{{money}}
		<h3>您的购物车</h3>
<table width="500" border="1" cellspacing="1">
		<thead>
    <tr>
      <td>商品名称</td>
      <td>数量</td>
      <td>单价</td>
      <td>小计</td>
      <td>操作</td>
   
    </tr>
    </thead>
     <tbody>
    <tr ng-repeat="good in goods">
      <td>{{good.name}}</td>
      <td>{{good.num}}</td>
      <td>{{good.price | currency:"RMB￥"}}</td>
      <td>{{good.num * good.price | currency:"RMB￥"}}</td>
      <td><button ng-click="delete($index)">删除</button></td>
    </tr>

     <tr>
       <td colspan="3"></td>
      <td>{{zje}}</td>
      <td> </td>
    </tr>
  </tbody>
</table>
<p ng-if="!isShow()">购物车为空!!!</p>
	</body>
</html>